ここ数年、Webサイトの中でスクロールに連動してアニメーションをさせる「パララックス」という表現が流行っていますね。
「パララックス」って何？というと下記のようなタイプのサイトに使われているような表現です。
James Bond 007 Cars Evolution | Evans Halshaw
中にはかなり自由度高く動くものもあり、面白そうなので一度そういった表現を導入してみようと思いました。
Javascriptを1から作っていくのはかなり大変そうだったので、ライブラリで良さ気なものを探していると「ScrollTween.js」というライブラリが見つかりました。
少しいじってみると自由度も高く触りやすいものだったので紹介します。
「ScrollTween.js」はこちらのページの「Download ZIP」からダウンロードできます。
以下、実装の手順です。
1.データの内容
demo/demo1.html
lib/jquery-1.8.1.min.js
lib/jquery.mousewheel.js
src/ScrollTween.js
2.demo.htmlを確認
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ScrollTween Demo</title>
<style>
#container {
width: 400px;
height: 400px;
background-color: pink;
padding: 0;
margin: 0;
}
#container * {
padding: 0;
margin: 0;
}
#head1 {
width: 200px;
height: 80px;
background-color: green;
}
#head2 {
width: 180px;
height: 60px;
background-color: blue;
}
</style>
<script src="../lib/jquery-1.8.1.min.js"></script>
<script src="../lib/jquery.mousewheel.js"></script>
<script src="../src/ScrollTween.js"></script>
<script>
$(function() {
'use strict';
var containerDiv = $('#container');
var container = ScrollTween.container(containerDiv);
container.add("#head1", function(tween) {
tween
/*#head1 スクロール100の状態の位置 画面外の上、中央*/
.to(100, tween.styles().topOut().center())
/*#head1 スクロール200～300の状態の位置 画面中央*/
.range(200, 300, tween.styles().middle())
/*#head1 スクロール400の状態の位置 画面外の右*/
.to(400, tween.styles().rightOut())
/*#head1 スクロール200～300の状態の位置 画面外の右*/
.range(500, 600, tween.styles().rightOut())
/*#head1 スクロール800の状態の位置 画面外の右*/
.to(800, tween.styles().left())
;/*この位置までが#head1への記述*/
});
container.add("#head2", function(tween) {
tween
.to(200, tween.styles().bottomOut().center())
.range(300, 400, tween.styles().middle())
.to(500, tween.styles().leftOut());
});
container.play();
});
</script>
</head>
<body>
<div id="container">
<h1 id="head1">
Heading1
</h1>
<h2 id="head2">
Heading2
</h2>
</div>
</body>
</html>
必要なjsファイルへのリンクが貼れていれば、既に動き出すはずです。
id毎に動きの指示を出しています。
39行目から49行目までのコメントはぼくの方で加筆したものです（demo.htmlにはコメントはありません）。コメントの内容で大体の指示の出し方が分かるかと思います。（恐らく）
スクロールの量を設定してその際の位置の指示を出せば動いてくれます。
3.位置を指定する際の値について
top() 画面上
bottom() 画面下
left() 画面左
right() 画面右
topOut() 画面外の上
bottomOut() 画面外の下
leftOut() 画面外の左
rightOut() 画面外の右
4.斜めの動きの指定
例えば#head1の最後の動きを斜めにしたい場合、48行目を下記のように書き換えます。
.to(800, tween.styles().bottom().left())
「スクロール位置が800の場合、画面の左下へ」という指定になるはずです。
5.位置の微調整について
カッコ内に数値を入れて位置の調整を行うこともできます。
例えば#head1の最後の動きを下から50px上の位置に指定したい場合、48行目を下記のように書き換えます。
.to(800, tween.styles().bottom(-50).left())
以上となります。
上記のポイントを抑えれば比較的簡単に作成中のhtmlに実装することができます。
後は各要素ごとに細かく動きの指定を行えば理想の動きが作れるようになるはずです。
案外簡単に扱えるのでおすすめのライブラリですね。
