ONZE/BLOGオンズ開発ブログ

［SimpleParallax］は手軽にパララックス効果を実装できるjQueryスクリプトです。
本体を読み込んで画像に任意の属性と値を指定すればスグに反映されます。

データのダウンロードは下記サイトからどうぞ。

GitHub : https://github.com/geosenna/simpleParallax

このプラグインはjQueryに依存します。
HTML内でファイルを読み込む際には、先にjQueryの本体ファイルのURLを指定しておきましょう。
また同時に、［SimpleParallax］の初期設定も記述しておきましょう。

具体的には次のようなコードになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="simpleParallax.min.js"></script>
<script>$('.thumbnail').simpleParallax();</script>

ここでは仮に「.thumbnail」が付与された画像に対して［SimpleParallax］を使うことにしています。

そこで画像部分は次のように「class="thumbnail"」を追加しておきましょう。

<img src="sample.jpg" alt="image" class="thumbnail">

設定はこれで終わり。
ほとんど手間がかかりませんね。

簡単なサンプルを用意しましたので実際の挙動を確認してみましょう。

サンプル : https://on-ze.com/demo/jquery-simpleparallax/

オプションでは、画像の移動方向と拡大比率を変更できるようになっています。

orientation

画像の移動方向。初期値は「up」で、方向を逆にするには「down」を指定する。

scale

画像の拡大比率。初期値は「1.2」になっており、CSS3の「transform:scale();」の値に変換される。

オプションを有効にするには引数で指定します。

<script>
$('img').simpleParallax({
	scale: '1.30',
	orientation: 'down'
});
</script>

画像をCSS3の「transform:scale();」で疑似的に大きくして視差効果を生み出す仕組みになっています。
実装は本当に簡単なので使いどころも多いかと思います。
ブックマークしておくとイイかもしれませんね。

GitHub : https://github.com/geosenna/simpleParallax