Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。
結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。
まずは実際に動作するサンプルを下記に。
画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。
なお、サンプルは transform プロパティを使用していますので、これに対応していないブラウザでは何も起こりません。IE 以外のブラウザであればほぼ問題なし。IE だと IE10 以降なら動くはず。サンプルの方でベンダプレフィックス付きの指定はしていないので、IE9 とかは動きません。
あと、スマホとかですが、iOS に関してはスクロールイベントの発生タイミングの問題で、画面のスクロールが止まった時にしかロゴが回転しないので、PC のようにスムーズに回転はしません。これはもう仕様なので諦めてください。Android 系とかなら多分ちゃんとスクロール中に回転すると思います。
実際のソースコード
では早速ソースコードを解説。まずは基本となるロゴ部分の HTML からですが、これは下記のようにシンプルに。
- <div class="logo">
- <img src="img/logo.png" width="370" height="370" alt="" />
- </div>
実際には div.logo を回転させちゃいますが、ここは jQuery で簡単に実装可能。まずはお決まりの jQuery 読み込みから
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
で、次に実際に回転させるためのソースコード全部。
- <script>
- $(function() {
- var rotate = function(logo, angle) {
- logo.css({
- "transform" : "rotate("+angle+"deg)"
- });
- }
- $(window).scroll(function(){
- rotate($(".logo"), $(window).scrollTop()*0.2);
- })
- });
- </script>
細かく説明していきます。
といってもやってることは単純なんですが、まずは var rotate で宣言した変数に、
- function(logo, angle) {
- logo.css({
- "transform" : "rotate("+angle+"deg)"
- });
- }
css() メソッドで transform プロパティを指定します。値は rotate("+angle+"deg) になりますが、logo、angle の各引数には次に出てくる関数で値を代入します。
- $(window).scroll(function(){
- rotate($(".logo"), $(window).scrollTop()*0.2);
- })
scroll() を使用してウィンドウのスクロール時に logo、angle の各引数に
rotate($(".logo")でlogoにセレクタ$(window).scrollTop()*0.2)でangleにrotate()の値
とそれぞれ値を代入します。
これによって、画面をスクロールすると、div.logo に対して style="transform: rotate([angle の値]deg);" が指定されて要素が回転しますよと。
rotate() の値は、scrollTop() でスクロール位置を取得してその値を使っていますが、そのまま入れてしまうと回転が早すぎるので、0.2 して調整しています。オリジナル （Tumblr Staff） では 0.4 されていますので、ここはお好みで。
以上です。
実際に動作するサンプルは下記で確認できます。
