[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama

パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワーアップしたjQueryのプラグインを紹介します。

SuperScrollorama -GitHub

[ad#ad-2]

• SuperScrolloramaのデモ
• SuperScrolloramaの使い方

SuperScrolloramaのデモ

デモではスクロールすると、さまざまなアニメーションが楽しめます。

デモページ

[ad#ad-2]

まずは、エレメントの表示から。
上：フェードでじんわりと表示され、下：フライでひょいと表示されます。

デモページ：フェードとフライ

続いて、上：スピンの回転表示と、下：スケールの拡大表示です。

デモページ：スピンとスケール

他にもスマッシュ（ふわっと表示）、ピン（固定表示）などもあります。
また、パネルのアニメーションも多数用意されており、まずはスライド。

デモページ：スライド

他にワイプやバウンドなどもあります。

デモページ：バウンド

ダイナミックな動きも可能で、下記の飛び回るようなフライング、スクロールの向きとは異なる動線をもったムーブなどがあります。

デモページ：フライング

複数のタイミングでスライドするパララックスにも対応しています。

デモページ：パララックス

SuperScrolloramaの使い方

SuperScrolloramaではより使いやすく強力なパフォーマンスを得るために「TweenMax」を使用しています。

外部ファイル

TweenMax.jsと「jquery.jsと当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.superscrollorama.js"></script>

JavaScript

アニメーションは、対象となるエレメントにアニメーションの種類とタイムラインを設定します。
下記の例はフェードです。

	$(document).ready(function() {
	  var controller = $.superscrollorama();
	  controller.addTween('#fade', 
	    TweenLite.from($('#fade'), .5, {css:{opacity:0}}));
	});

より詳しい実装方法は、デモページの「How To Use」をご覧ください。