めくる感じのスライダーのデモ

先日の「JQueryを使った簡単なスライダー」に引き続き、スライダーの別パターンを作ってみました。

今回は、JQueryの既存のエフェクトは使わずオリジナルな動きです。

一行を数行に差し替えるだけかと思いきや、結構てこずりました。

そのため、先日とは違いごく単純にするため、文字の連動は外しました。

まずはご覧ください。(※モダンプラウザ以外には対応していませんので。実用化される時はご注意ください。)

プログラムをこちらに載せるほどの完成度もなさそうですので、ご興味のある方は、デモ画面からソースをコピーして研究してみてください。

ここでは、ここで使ったプログラムの基本的な考え方だけ触れてみたいと思います。

transformのアニメーション

文字や画像のアニメーションは、基本的にCSSに設定されたスタイルを変更すると言って良いかと思いますが、それにはいくつか方法があります。

  • CSSアニメーションを使う方法
  • CSSのtransitionを使う方法
  • jQueryのanimateを使う方法
  • jQuery等で、stepを使う方法
  • その他

申し訳ありませんが、この辺り、私も網羅的に的確には説明しきれません。

また、今回のtransformは一層の難しさがあります。

transformに対してはjQueryのanimate関数は使えないからです。

stepを使う方法でもできると思いますが、今回は、何の方法というのか、transitionとjQueryを折衷したような方法を使いました。

ポイントとなるコードはこれです。

        $(obj).css({
            transform: 'rotate3d(1,10,1,-120deg)',
            opacity: 0
        });

あらかじめ、要素にtransitionの秒数を設定しておいた上で、デモにあるように三次元の回転をさせるために、rotate3dを使いました。

最初の3つの数字はx, y, zの回転軸を表します。

「-120deg」は回転角度です。反時計回りなので、マイナスにしています。

また、この回転の動きと合わせて不透明度が0になるようにしました。

queueメソッドを使って順番に

アニメーションを順序よく実行させたいという要求にしばしば出くわします。

ケースバイケースで色々なやり方があると思います。

CSSアニメーションなら、animation-delayを指定しておけば良いでしょう。

また、jQueryのアニメーションならdelay(1000)などをチェーンメソッドのように挿入したり、コールバック関数を使ったり、completeの中に書いたり、、、この辺り、系統立てて説明できませんが、色々と方法があります。

その一つとして、今回はqueueメソッドを使いました。

        $(obj).delay(2500).queue(function(){
            $(obj).css('transform', 'rotate3d(1,10,1,0deg)');
            $('.wrap').prepend(obj);
            $(obj).css('opacity',1);
        });    

今回のスライダーの場合、紙芝居の一番上のスライドを三次元回転させるわけですが、回転にはtransitionで2秒かけていますので、その少し後ということで2.5秒後、queueメソッドで関数を実行しています。

この関数では、スライドの回転角度を元に戻し、スライドを紙芝居の一番下に移動させ、不透明度も元に戻す操作をしています。

ここで、このqueueメソッドのようなことをしないと、-120度の回転と同時に0度の元に戻るというようなことになってしまい、結局アニメーションは起こらなくなってしまいますから、このように時間差を設けるわけです。

clearIntervalの設定

今回は、「次へ」「前へ」ボタンの関数の最初に次のコードを入れました。

clearInterval(timer1);
timer1 = setInterval(Next, 6000);

タイマーを一旦クリアし、また同じタイマーを再設定しています。

こうすると、タイマーがまた0から計測し直してくれます。

6秒近くなってから、「次へ」のボタンを押すと、その操作により次のスライドが開かれ、またすぐにタイマーに従って次のスライドが開かれるため、そのように慌ただしく続かないように、タイマーを一旦リセットさせています。

まとめ

三次元アニメーションはモダンプラウザにしか対応していないとはいえ、CSSは三次元であっても結構高性能な動きをしてくれると思います。

今回のデモでご覧になるように、大きな写真画像でもかなりスムースな動きをします。

transformを使うと、CPU処理ではなくGPUにより処理されるから速いのだそうです。

つまり、transformを使うとアニメーションが高性能化するわけで、利用しないのはもったいないと言えるのではないでしょうか。

今回のブログ記事はかなり雑駁に書いていますが、ご自身でトライされてみると、「あ、色んなやり方があるんだ」と参考にしていただけるのではないかと思います。

ではまた。