手軽に画像をパララックスエフェクト「simpleParallax」

はじめに

画像にパララックスエフェクトをかけられるライブラリ「simpleParallax」をご紹介します。
こちらはjQuery依存のライブラリになります。導入が手軽です。

公式DEMOはこちら

使ってみる

まずダウンロード

こちらから

設置する

jsの読み込み

パスは適宜変えて下さい。（jQueryの読み込みも忘れずに）

<script src="assets/js/simpleParallax.js"></script>

パララックスさせる画像を設定

パララックスさせたい画像に任意のclassを付与します。

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

jsを実行

$(function(){
  $('.thumbnail').simpleParallax();
});

これだけで画像がパララックスアニメーションします。
その他にもオプションが用意されています。
簡単に下記にまとめてみました。

オプション

内容とデフォルトの設定

オプション名	内容	デフォルトの設定
delay	アニメーションするまでの遅延時間（値を大きくするとヌルッとした感じになります）	0.6
orientation	アニメーションの向き	up
scale	画像の拡大の比率（1.0以上が必要）	1.2
overflow	元画像のサイズの外側にはみ出さない様にする（falseに設定するとはみ出します）	true

デモ

デモを何種類か作成しました。
それぞれ上記のオプションを色々と使ってみました。

DEMO

さいごに

jQuery依存ですが、導入もサクッとできるので、ぜひ使って見て下さい。
公式サイトにも書いてありますが、「scale」の値を大きくしすぎると画像が劣化するのでご注意下さい。
参考になればと思います。