スクロールに応じて要素が動く、パララックスを実装できるjQueryプラグイン「scrolldeck」

スクロールによるパララックス効果を実装できるjQueryプラグイン「scrolldeck」

スクロールすると、画像やテキスト、その他色々な要素がアニメーションするWebデザインを最近良く見かけます。

パララックス(視差効果)や細かなアニメーションするものまで、様々なものがあると思いますが、
本日紹介する「scrolldeck」を使用するとパララックス効果を簡単に実装できるようになります。

パララックスがどんなものか分からない方のために先にプラグインのデモリンクを貼っておきます。

デモ1

デモ2

デモ3

スクロールで画像がずれて行く感じがたまらないですね。

使い方

プラグインを初期化します。

$(document).ready(function() {
  var deck = new $.scrolldeck();
});

オプション設定をする場合

$(document).ready(function() {
  var deck = new $.scrolldeck({
    buttons: '.nav-button',
    slides: '.slide',
    duration: 600,
    easing: 'easeInOutExpo',
	offset: 0
  });
});

HTML要素はslideというclassを指定して、構成を作っていけば良いようですね。

    
This paragraph will fly in from the left.
    
This paragraph will fly in from the right.



    
This slide will get be ’pinned‘ to the top of the screen until all the slide animation builds are complete.
    
This paragraph will fade in (the default animation)
    
This paragraph will fade in while its letter spacing contracts to normal.

興味のある方はぜひダウンロードして使ってみてください。