パララックスを簡単に導入できるparallax.jsというプラグインが便利でした
2020.04.06
みなさま、こんにちは。
前記事に続き、背景に対するjQueryのプラグインについてご紹介します。
パララックスな背景を簡単に導入できるparallax.js
まずはデモサイトをご覧ください。
※スマホでは固定背景になりますので、パソコンでご確認ください。
スクロールすると背景が少しずつ動きます。
最近よく見る仕様ですよね。
導入の仕方
プラグインのファイルはこちらからダウンロードしてください。
使用するのは parallax.min.js だけあれば大丈夫です。
ソースコードの書き方
まずはソースをご覧ください。
|
1 2 |
<script src="/path/jquery-3.4.1.min.js"></script> <script src="path/parallax.min.js"></script> |
head で jQuery と jquery.mb.YTPlayer を読み込んでください。
特に実行のコードはいりません！
|
1 |
<div class="l-back js-parallax" data-parallax="scroll" data-image-src="任意の画像"> |
次にコンテンツ内。
背景をつけたブロックに data-parallax="scroll" を付与し、任意の画像を設定してください。
たったこれだけでパララックスが導入完了しました。
【DEMO】parallax.min.jsでパララックスを導入する
パララックスを使用しているだけで、流行りのサイトっぽくなるので、ぜひ参考にしてみてください。
