jQueryプラグイン parallax background.jsの使い方

シンプルな設定で軽量のパララックスプラグイン「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>

１つの画像に１つの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.オプション

7.その他

2017年7月11日追記
この記事がレバレジーズ(株)のブログ「知っておくと便利なJQueryのプラグインまとめ」に紹介されました。