[jQuery] Block Scrollプラグイン

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。

Block Scroll

Block Scrollは、その名の通り、ブロックを一つずつスクロールします。
そのため、一つのブロックで紹介したい内容を完結させる必要がありますが、ブロック数で分ける事もできます。

導入方法

一式は、下記からダウンロード出来ます。
https://github.com/DominikGorecki/block-scroll

まずは、jsの読み込みです。

<script src="js/jquery.js"></script>
<script src="js/blockScroll.js"></script>

そして、CSSも読み込みます。

<link rel="stylesheet" type="text/css" href="css/blockScroll.css">

最後に、jsの実行です。

<script>
    $(function() {
        var blockScroller = $("#main-wrap").blockScroll();
    });
</script>

これで準備は整いました。

HTMLはというと、全てを内包するようにmain-wrapがないといけません。
そして、その子要素が全てブロックとして扱われます。

つまり、下記のようになります。

<div id="main-wrap">
 <div>ページ1</div>
 <div>ページ2</div>
 <div>ページ3</div>
 <div>ページ4</div>
 <div>ページ5</div>
 <div>ページ6</div>
 <div>ページ7</div>
</div>

これで、中のdivが全てブロックとなります。

サンプルページを作ってみましたので、よかったら見てください。
サンプルページ

デフォルトの状態だと、各ブロックがfadeするようになっています。
そのため、表示が若干遅れがちになります。

サンプルページでは、そのfadeを切ってすぐに表示されるようにしてあります。
あと、スクロールもわざと速くしてあります。どれくらいになるのか実験ですから、あしからず。

fadeを切る方法は、下記のように実行文に追記してください。

$(function() {
　var blockScroller = $("#main-wrap").blockScroll({
　　scrollDuration: 7,
　　fadeBlocks: false,
　　fadeDuration: 0
　});
});

各パラメータは、省略できますので、必要なければ削除しても大丈夫です。

まとめ

けっこう面白いプラグインですので、使い方や見せ方次第では面白いサイトができるでしょう。

サンプルサイトでは、漫画のような見せ方もしてました。
http://www.dominikgorecki.com/p/block-scroll/demo02.html

パララックスとは違う感じで新鮮なサイトが出来るような気がします。