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

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

サイトのキャプチャ

SuperScrollorama -GitHub

SuperScrolloramaのデモ

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

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

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

デモのキャプチャ

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

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

デモのキャプチャ

デモページ:スライド

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

デモのキャプチャ

デモページ:バウンド

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

デモのキャプチャ

デモページ:フライング

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

デモのキャプチャ

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

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」をご覧ください。

top of page

©2017 coliss