パララックスサイトを最近作る機会があり、
普通にjsでscrollを取って諸々計算する方法でもいいかなと思ってたんだけど、
メンテナンスとかを考えると面倒だと思ってScrollTween.jsというのを使った。
もちろんパララックス系のライブラリはいくつもあったりはするんだけれども、
自由度が低いというかシーンが限られてるというか…みたいな感じであった。
その点ScrollTween.jsは直感的にいける感じのライブラリで中々良い。
ちなみにダウンロードはこちらから。
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/ScrollTween.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(function(e){
'use strict';
var containerDiv = $('#wrapper');
//マウススクロールした際のスピードとかスマホでスクロールした際のスピード設定
var container = ScrollTween.container(containerDiv,{wheelSpeed:10,touchSpeed:3});
//0〜600にかけて中央から上に行く
container.add("#logo", function(tween){
tween
.to(0,tween.styles().center().middle())
.to(600,tween.styles().topOut())
});
//400〜800で出てきて、800〜1600で上に行く
//ついでに背景画像も動かす
container.add("#page2",function(tween){
tween
.to(400,tween.styles().bottomOut())
.to(800,tween.styles().top(),{progress:function(tween){
$("#page2").css("background-position","0 0")
}})
.to(1600,tween.styles().topOut(),{progress:function(tween){
$("#page2").css("background-position","0 300px")
}})
});
//800〜1400まで左から中央ちょっと右に動く
container.add("#page2-something",function(tween){
tween
.to(800,tween.styles().leftOut().middle())
.to(1400,tween.styles().center(300))
});
//1000〜1600で出てくる
container.add("#page3",function(tween){
tween
.to(1000,tween.styles().leftOut().middle())
.to(1600,tween.styles().top())
});
//1000〜1200まで待機、1200〜1600まで動く
container.add("#page3-something",function(tween){
tween
.range(1000,1200,tween.styles().center().middle())
.to(1600,tween.styles().center(-100).middle(200))
})
//setTimeOut使わないと要素数によっては、うまく中央にいかない
setTimeout(function(){
container.play();
},300);
});
</script>
<style>
#wrapper,article{width:100%;height:100%}
</style>
</head>
<body>
<div id="wrapper">
<article id="page1">
<h1 id="logo">ロゴ</h1>
<p id="page1-something">何か</p>
</article>
<article id="page2">
<h2 id="page2-something">ページ2</h2>
</article>
<article id="page3">
<div id="page3-something">
<p>page3の中の文</p>
<p>ほにゃほにゃ</p>
</div>
</article>
</div>
</body>
</html>
とこんな感じで書いてみたり。実際のソースコードから引っ張って来れるものでもないから、今適当に書いてみたわけで。
だからうまく動かなかったらごめんなさい。
・toにて記載されていない間は、その要素はdisplay:hiddenとなってるので要注意。
・containerにtweenとしてaddされていない要素はそのままの表示になるので要注意。
・パララックスみたいに全体で切り替えるような形だと表示されない可能性あり。
・#page3-somethingみたいな場合は中の要素はもちろん動かない。
・スクロール終了ポイントにいくと終了。
・上に書いたソースだと1600の状態のまま終了。
・tween.styles()でその後に書けるものは下記のもの。
・座標指定出来るもの：top()、right()、bottom()、left()
・座標指定出来ないもの：topOut()、rightOut()、bottomOut()、leftOut()
・to(400〜〜〜).to(800,〜〜〜)は400の時にはここにいて、800の時にはここにいるみたいな意味。
・range(400,800,〜〜〜)は400から800の間はここにいますよという意味で、
400から800の間はこういう変化をしますよという意味ではない。
・{progress:〜〜〜}で直接cssを弄れる。
・スマホでも問題なく動作する
とりあえず適当につらつら書いてみた。
かなり便利なプラグインだなぁと思った。
気が向いたらさらにこれをもう少しわかりやすく使えるようなものでも作ろうと思う。
0 件のコメント:
コメントを投稿