jquery.jInvertScroll.jsを使ってパララックス効果的にブラウザを横スクロール
- 2019.06.19
- JavaScript jQuery
- jquery.jInvertScroll.js, parallax, パララックス, 横スクロール

jquery.jInvertScroll.jsを使って3つの横長画像をブラウザをパララックス効果的に横スクロール表示してみます。
1.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>
2.HTMLの記述例
<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>
3.読込むJsファイルとJavaScriptの記述例
<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を使ってパララックス効果的に横スクロールするデモ
ソース元:jInvertScroll – A lightweight jQuery horizontal Parallax scrolling plugin
ブラウザのスクロール時にレイヤーでわかれたコンテンツが時間差で表示されるイメージですかね。
-
前の記事
テキストエリアに入力した文字から残りの文字数を表示するJavaScript 2019.06.18
-
次の記事
jQueryで画像の一部を虫眼鏡で拡大した様に表示してみる 2019.06.20