シンプルな設定で軽量のパララックスプラグイン「parallax-background.js」をご紹介したいと思います。このプラグインは背景画像のスクロールしかできませんが、スムーズなスクロールです。

スポンサーリンク

1.デモ

デモを作成しましたのでよろしかったら、ここをクリックしてください。

2.ダウンロード

公式ページに行って、ダウンロードしてください。 ダウンロード完了し解凍すると「parallax-background-master」フォルダーができます。

3.必要なファイル

「parallax-background-master」の中の「js」フォルダーにある「parallax-background.min.js」を自分のフォルダーにコピーします。私の場合はプラグイン本体は「js」フォルダーを作成してそこへコピーしています。スタイルシートのファイルは自分で作成します。私の場合は「css」フォルダーを作成して「parallax-background.css」という名前のファイルを作成し、そこへコピーしています。

4.CSSの編集

「.parallax」に 必ず height: xxxpx を設定します。設定しないと画像が表示されません。


body {
	margin: 0;
}
.contents {
	margin: 64px 32px;
}
.parallax {
	width: 100%;
	height: 400px;
	background: #000000;
}
.full-height {
	height: 100vh;
	color: #ffffff;
}

5.HTMLの編集

headタグ内で、自作CSSのparallax-background.css、jQuery本体のjquery.js、プラグインのparallax-background.min.jsを読み込みます。jQuery本体のバージョンはお手持ちのバージョンを使用してください。プラグインは画像が読み込まれた時とウィンドウサイズが変わった時に実行するようにしています。


<link href="./css/parallax-background.css" rel="stylesheet" />
<script src="./js/jquery-1.12.0.min.js" ></script>
<script src="./js/parallax-background.min.js" ></script>

<script>
$(function() {
	$(window).on('load resize', function() {
		$('.parallax').parallaxBackground();
	});
});
</script>

</head>

1つの画像に1つのdiv要素を記述します。設定する値は以下の「6.オプション」を参照してください。


<div class="parallax"
 data-parallax-bg-image="./images/test001.jpg"
 data-parallax-bg-position="center bottom"
 data-parallax-speed="0.4"
 data-parallax-direction="down"
>
</div>

<div class="contents">
 コンテンツを記述します
</div>

<div class="parallax"
 data-parallax-bg-image="./images/test002.jpg"
 data-parallax-bg-position="center top"
 data-parallax-speed="0.9"
 data-parallax-direction="left"
>
</div>

6.オプション

オプション名初期値意味
data-parallax-bg-imageなし画像のパス
data-parallax-bg-positioncenter center背景画像の開始位置 (横方向 縦方向)
left top、left center、left bottom、
right top、right center、right bottom、
center top、center center、center bottom
data-parallax-bg-repeatno-repeat背景画像のリピートの仕方
repeat、repeat-x、repeat-y、no-repeat
data-parallax-bg-sizecover背景画像のサイズ
auto、contain、cover
data-parallax-speed0.5視差効果の速度 0以上1以下の少数
0は視差効果なし
1に近づくほど効果が大
data-parallax-directionup視差効果の方向
up、down、left、right

以上になります。