JavaScript

jquery.superscrollorama.jsで実現するパララックスエフェクトとアニメーション

  /

Webページのエフェクトとして注目を集めるパララックスやアニメーションですが、jquery.superscrollorama.jsを使ってこれらのエフェクトを簡単に実装する方法をご紹介します。

この記事では、ページのスクロールに合わせてコンテンツが視覚的なエフェクトを持って表示される方法を解説します。jquery.superscrollorama.jsは、スクロールとともにページ内の要素を操作するためのJavaScriptライブラリです。

Contents

CSSの記述

まず、エフェクト表示を実装するためのCSSスタイルを準備しましょう。次に記述するCSSは、normalize.cssファイルを先に読み込んでから、パララックスやアニメーション効果を適用したい要素に適用するCSS記述例です。
パララックスや色々なエフェクト表示エリア（.demo #wrapper、#fly、#scale）のCSS記述です。

<link rel="stylesheet" href="normalize.css" type="text/css">
<style>
* {
  padding: 0;
  margin: 0;
}
body {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  visibility: hidden;
}
.demo{
  visibility: visible;
}
.demo #wrapper{
  height: 1600px;
  padding-top: 400px;
  margin-bottom: 100px;
  width: 100%;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0 40px 0;
  line-height: 1.8em;
}
h2 {
  font-size: 140px;
  margin: 0;
  color: #4DFFA6;
  padding: 60px;
  text-shadow: 0 4px 2px #000;
  width: 90%;
}
#fly { position: relative; }
#scale { width: 500%; margin: 0px -200%; padding: 0; }
</style>

HTMLの記述

次に、HTMLの構造を記述します。特定のid属性を持つ要素をスクロール効果の対象として指定します。
bodyタグにclass=”demo”を追記し、パララックスや色々なエフェクト表示エリア（id=”wrapper”、id=”fade”、id=”fly”、id=”spin”、id=”scale”）を用意します。

<body class="demo">
<h1>jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示します。<br>下にスクロールさせてみて下さい。</h1>

<div id="wrapper">
      <h2 id="fade">フェードイン</h2>
      <h2 id="fly">左から出現</h2>
      <h2 id="spin">回転</h2>
      <h2 id="scale">拡大</h2>
</div>
</body>

JavaScriptの記述

ここからはSuperscrolloramaを使って、スクロールエフェクトの処理を実装します。必要なJavaScriptライブラリ、TweenMax.min.js、jquery-1.9.1.min.js、jquery.superscrollorama.jsファイルを読み込みます。
$.superscrollorama().addTween(‘エフェクトエリアのid’, TweenMax.from( $(‘エフェクトエリアのid’), オプション}), スクロール時間)を記述します。オプションは「SUPERSCROLLORAMA」を参照。

<script type="text/javascript" src="TweenMax.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.superscrollorama.js"></script>
<script>
$(document).ready(function() {
  var scrollDuration = 200; 

  $.superscrollorama().addTween('#fade', TweenMax.from( $('#fade'), .5, {css:{opacity: 0}}), scrollDuration);
  $.superscrollorama().addTween('#fly', TweenMax.from( $('#fly'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}), scrollDuration);
  $.superscrollorama().addTween('#spin', TweenMax.from( $('#spin'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}), scrollDuration);
  $.superscrollorama().addTween('#scale', TweenMax.fromTo( $('#scale'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}), scrollDuration);
});
</script>

jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するデモページ

エフェクトがどのように動作するかを確認したい方のために、デモページへのリンクを用意しました。下記のリンクからアクセスしてみてください。

jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するデモページ

ソース元：SUPERSCROLLORAMA

Superscrolloramaの詳細なドキュメントやサンプルコードは、以下の公式ページで確認できます。

SUPERSCROLLORAMA

まとめ

jquery.superscrollorama.jsを使うことで、シンプルなスクリプト記述でパララックスやアニメーション効果を簡単に実装できます。
ページのスクロールを活かしたインタラクティブなエフェクトを作成する際に、ぜひ利用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

パララックス jquery.superscrollorama.js TweenMax.min.js
関連記事