jquery.jInvertScroll.jsを使って3つの横長画像をパララックスで横スクロールする方法をご紹介します。
Contents
ディスプレイ広告
jquery.jInvertScroll.jsを使ってパララックスで横スクロールするCSSの記述
※パララックス横スクロールエリア(.scroll)の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>
jquery.jInvertScroll.jsを使ってパララックスで横スクロールするHTMLの記述
※パララックス横スクロールエリア(class=”scroll”)に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アナリティクスタグは流用しないで下さい。