Parallax.jsで簡単にパララックスを実装する

tecmemo1804
こんにちは、ウェブラボクリエイターズメモです。

最近個人的にパララックスなどサイトに動きを付ける機会が多くあり、いいプラグインなど無いかな?

と思い探してみたところ見つけたのでその紹介をしたいと思います。

まずは作成したDEMOをご覧下さい

スクロールすると背景が少しずつ動いていく良く見るパララックスですね。

これがとても簡単に実装できてしまうんです!

まずは下記の公式サイトからプラグインをダウンロードしてきましょう。

Parallax.js公式

ダウンロードしたファイルのparallax.min.jsだけあれば大丈夫です。

ではまずはHTMLから解説していきます。

まずはjQuery本体と一緒にプラグインを読み込ませます。

■HTML スクリプト部分

次に以下のように記述します。

■HTML

パララックスを付けたい場所にdata-parallax=”scroll”を、 data-image-src=”画像のパス”で背景に指定したい画像の指定します。クラス名は何でも大丈夫です。

最後にCSSの記述をします。

■CSS

公式には書いてありませんでしたが私の環境では.parallax-slider~の記述を書かないと背景の位置がずれてしまったので参考までに。。。

対応ブラウザですが、ざっと見た感じだとIEは10から動くみたいです。ただ動作がかなりカクついていたので使用する際には注意が必要ですね。

オプションも色々とあるようですので時間があるときにでも試してみようかなと思います。

以上、クリエイターズメモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。