[jQuery] Block Scrollプラグイン
公開日:
:
jQuery, Web制作 javascript, jQuery
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
今回は、ブロック毎にスクロールする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
パララックスとは違う感じで新鮮なサイトが出来るような気がします。
ad
関連記事
-
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に
-
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ