無料テンプレートをいじってみています。
その中にparallaxがあり、最初なんだかわからなかったのでちょっと調べてみました。
メモ
Parallaxとは
直訳すると「視差」で、カーソルの動きに合わせて背景を動かせるJavaScriptのプラグインです。
導入方法
ダウンロード
まずはファイルをダウンロードします。
プラグインはたくさん出ていますが、今回のテンプレートではこちらが使われていました。
parallax.js
解凍したら任意のディレクトリに保存してください。
読み込み
</body>の前にこちらのソースを記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/parallax.js"></script>
＊テンプレートではjQueryのバージョンが2.2.0でした。
＊jsの保存場所の指定を間違えないようにしましょう。
HTML
このパララックスを使う時はclassで指定します。
<div class="parallax-window" data-parallax="scroll" data-image-src=""></div>
任意の画像などを指定します。
jQueryのソースを記述する
以下のソースをparallax.min.jsの次に記述します。
$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});
＊ここでもキチンと画像の指定を忘れないように！
ここの書き換えを忘れてかなりの時間ハマっていました・・・
スタイルを整える
あとはcssなどで要素のスタイルを整えれば完成です。
＊ちなみに、ページ自体がスクロールできないとこちらの画像も動かないので、ページがスクロールするようにしてください。
このプラグインではスクロールのみですが、他では色々できるみたいなのでもっと技術があがったら試してみたいと思います。