パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
こんにちは、鴨田です 。
今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。
春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。
とはいえ、最近は視差効果で奥行きを表現するというよりも、
単純にスクロールに連動してアニメーションさせることも含めて、
パララックスサイトと呼んでいるが多いのではとも思います。
何かと話題のスマホアプリ「comm」の紹介ページもそうですね。
そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。
今回ご紹介するのは、「ScrollTween.js」というプラグインです。
シーエーモバイル社のコーポレートサイトを作成するために開発され、
せっかくだからということで、公開されているようです。
経緯に関しては、下記スライドをご覧下さい。
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
作者である白石さんの体験談です。
ScrollTween.js | github
上記から、プラグインとサンプルをまとめて、ダウンロードすることが可能です。
サンプルにちょっとした使い方は載っているのですが、あまり詳しくは書いてないので、
この記事で補足できればと思います。
とはいえ、自分もちゃんとしたJavaScriptを書いたり読んだり出来るわけではなく、
見よう見まねのところもありますので、コード的におかしいところがあってもご容赦ください。
● ダウンロード
ScrollTween.js | github
上記ページ、「ZIP」ダウンロードボタンを押して、ダウンロードしてください。
中身は、プラグイン本体である「ScrollTween.js」、
ライブラリとしての「jquery.js」「jquery.mousewheel.js」、
デモページ「demo1.html」が入っています。
● サンプルページ構成
・demo.html
・jquery-1.8.1.min.js
・jquery.mousewheel.js
・ScrollTween.js
demo1.htmlを参考にして、demo.html新規で作成します
● demo.htmlコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ScrollTween Demo</title>
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="ScrollTween.js"></script>
<script>
$(function() {
'use strict';
var containerDiv = $('#container');
var container = ScrollTween.container(containerDiv);
container.add("#cnt1", function(tween) {
tween
.to(100, tween.styles().topOut().center(100))
.range(200, 300, tween.styles().middle(-100))
.to(400, tween.styles().rightOut());
});
container.add("#cnt2", function(tween) {