JavaScript PR

jquery.jInvertScroll.jsを使ってパララックスで横スクロールする方法

記事内に商品プロモーションを含む場合があります

jquery.jInvertScroll.jsを使って3つの横長画像をパララックスで横スクロールする方法をご紹介します。

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アナリティクスタグは流用しないで下さい。