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

手軽に画像をパララックスエフェクト「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」の値を大きくしすぎると画像が劣化するのでご注意下さい。
参考になればと思います。