パララックスというか、スクロールでアニメーションさせる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) {
tween
.to(200, tween.styles().bottomOut().center())
.range(300, 400, tween.styles().middle())
.to(500, tween.styles().leftOut());
});
container.add("#cnt3", function(tween) {
tween
.to(400, tween.styles().center().middle())
.to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
.to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
.to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
.to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });
});
container.play();
});
</script>
<style>
html, body {margin: 0; padding: 0; height: 100%;}
#container {width: 100%;height: 100%; display: block;}
.style1 {padding: 20px; border: 2px dotted #009; font-size: 24px; color: #333; background: #ccc;}
</style>
</head>
<body>
<div id="container">
<div id="cnt1" class="style1">Top - Center - Right</div>
<div id="cnt2" class="style1">Bottom - Center - Left</div>
<div id="cnt3" class="style1">Opacity 0 - 1 - 0</div>
</div>
</body>
</html>
● HTMLのbody部分説明
<div id="container">
<div id="cnt1" class="style1">Top - Center - Right</div>
<div id="cnt2" class="style1">Bottom - Center - Left</div>
<div id="cnt3" class="style1">Opacity 0 - 1 - 0</div>
</div>
div#containerは必須要素ですので、
一番外側のラッパーとして、配置する必要があります。
そして、div#containerの内容要素がアニメーションの対象となります。
各要素に適切なidを振って下さい。
ここでは、3つの要素に#cnt1～#cnt3と名付けました。
● JavaScriptの説明
$(function() {
'use strict';
var containerDiv = $('#container');
var container = ScrollTween.container(containerDiv);
container.add("#cnt1", function(tween) {
tween
.to(100, tween.styles().topOut().center())
.range(200, 300, tween.styles().middle())
.to(400, tween.styles().rightOut());
});
container.add("#cnt2", function(tween) {
tween
.to(200, tween.styles().bottomOut().center(100))
.range(300, 400, tween.styles().middle(-100))
.to(500, tween.styles().leftOut());
});
container.add("#cnt3", function(tween) {
tween
.to(400, tween.styles().center().middle())
.to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
.to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
.to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
.to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });
});
container.play();
});
#cnt1では、移動アニメーションを用いています。
.to(100, tween.styles().topOut().center())
.range(200, 300, tween.styles().middle())
.to(400, tween.styles().rightOut());
スクロール100で、中央位置に#cnt1が画面インします。
スクロール100～200で画面上部から画面中央に移動します。
スクロール200～300は静止します。
スクロール300～400で画面中央から画面右側に移動します。
スクロール400で、画面アウトします。
#cnt2では、少し位置を変えています。
.to(200, tween.styles().bottomOut().center(100))
.range(300, 400, tween.styles().middle(-100))
.to(500, tween.styles().leftOut());
スクロール200で、中央位置から右に100pxずれた場所に#cnt1が画面インします。
スクロール200～300で画面上部から画面中央より上に100pxずれた場所に移動します。
スクロール300～400は静止します。
スクロール400～500で画面中央から画面右側に移動します。
スクロール500で、画面アウトします。
#cnt3は、透明度を変えています。
.to(400, tween.styles().center().middle())
.to(400, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 0) } })
.to(600, 0 , { progress: function (tween) { $("#cnt3").css("opacity", tween) } })
.to(800, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1) } })
.to(1000, 0 , { progress: function (tween) { $("#cnt3").css("opacity", 1 - tween) } });
スクロール400で、画面中央に配置します。
スクロール400～600で透明度を0から1へ変更します。
スクロール600～800は静止します。
スクロール800～1000で透明度を1から0へ変更します。
スクロール1000で、消滅します。
アニメーション用に用意されている機能でよく使うのは下記ではないかと思います。
遷移：topOut, bottomOut, leftOut, rightOut
位置：center, middle, top, bottom, left, right
その他、イージングやキーフレームも用意されているようなのですが、
ちゃんとした使い方がよく分かっていないので、
いろいろと試してみたい方はScrollTween.jsのソースコードを
一度読んでみるといいのではないでしょうか。
● デモ
下のiframe内でスクロールしてください。
● デモ2
下のiframe内でスクロールしてください。
デモページ2
少し、それっぽい構成にしてみました。
いかがでしょうか。
結構、簡単にアニメーション出来るのではないかと思います。
皆様も是非試してみてください！
