jquery.jInvertScroll.jsを使って3つの横長画像をパララックスで横スクロールする方法をご紹介します。
Contents
パララックスで横スクロールするCSSの記述
※パララックス横スクロールエリアのCSS設定です。必要に応じて変更して下さい。
<style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; } h1{ font-size:18px; line-height:1.6em; text-align:center; font-weight:normal; padding:10px 0; } .scroll { position: fixed; bottom: 0; left: 0; } .horizon { z-index: 1; width: 3000px; } .middle { z-index: 500; width: 4000px; } .front { z-index: 1000; width: 6000px; } </style>
パララックスで横スクロールするHTMLの記述
※3つの横長画像を用意しました。必要に応じて変更して下さい。
<h1>マウスを縦スクロールするとパララックス効果的に3つの画像を横スクロール表示します。</h1> <div class="horizon scroll"><img src="horizon.png" alt="" /></div> <div class="middle scroll"><img src="middle.png" alt="" /></div> <div class="front scroll"><img src="front.png" alt="" /></div>
jquery.jInvertScroll.jsを使ってパララックスで横スクロールするJavaScriptの記述
※jquery-1.8.1.min.js、jquery.jInvertScroll.jsファイルを読み込みます。$.jInvertScroll([‘横スクロールするエリア’],{オプション})でパララックス横スクロールするエリアに対して高さやスクロール時のアクションを設定します。
<script type="text/javascript" src="jquery-1.8.1.min.js"></script> <script type="text/javascript" src="jquery.jInvertScroll.js"></script> <script type="text/javascript"> (function($) { $.jInvertScroll(['.scroll'], { height: 6000, onScroll: function(percent) { console.log(percent); } }); }(jQuery)); </script>
jquery.jInvertScroll.jsを使ってパララックス効果的に横スクロールするデモページ
jquery.jInvertScroll.jsを使ってパララックス効果的に横スクロールするデモ
ソース元:jInvertScroll – A lightweight jQuery horizontal Parallax scrolling plugin
ソース元:jInvertScroll – A lightweight jQuery horizontal Parallax scrolling plugin
ブラウザのスクロール時にレイヤーでわかれたコンテンツが時間差で表示されるイメージです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告