Parallax.jsで簡単にパララックスを実装する
2018.04.25 Posted by Coding_team
こんにちは、ウェブラボクリエイターズメモです。
最近個人的にパララックスなどWebサイトに動きを付ける機会が多くあり、いいプラグインなど無いかな？
と思い探してみたところ見つけたのでその紹介をしたいと思います。
スクロールすると背景が少しずつ動いていく良く見るパララックスですね。
これがとても簡単に実装できてしまうんです！
まずは下記の公式サイトからプラグインをダウンロードしてきましょう。
ダウンロードしたファイルのparallax.min.jsだけあれば大丈夫です。
ではまずはHTMLから解説していきます。
まずはjQuery本体と一緒にプラグインを読み込ませます。
■HTML スクリプト部分
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="js/parallax.min.js"></script> |
次に以下のように記述します。
■HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="parallax-window" data-parallax="scroll" data-image-src="./img/001.jpg"> <h2>見出し見出し見出し見出し</h2> テキストテキストテキストテキスト </div> <div class="parallax-window" data-parallax="scroll" data-image-src="./img/002.jpg"> <h2>見出し見出し見出し見出し</h2> テキストテキストテキストテキスト </div> |
パララックスを付けたい場所にdata-parallax=”scroll”を、 data-image-src=”画像のパス”で背景に指定したい画像の指定します。クラス名は何でも大丈夫です。
最後にCSSの記述をします。
■CSS
|
1 2 3 4 5 6 7 8 9 |
.parallax-window { min-height: 800px; background: transparent; } .parallax-slider { top: 0; left: 0; } |
公式には書いてありませんでしたが私の環境では.parallax-slider～の記述を書かないと背景の位置がずれてしまったので参考までに。。。
対応ブラウザですが、ざっと見た感じだとIEは10から動くみたいです。ただ動作がかなりカクついていたので使用する際には注意が必要ですね。
オプションも色々とあるようですので時間があるときにでも試してみようかなと思います。
以上、クリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
