CSS3を駆使したトランジション効果ライブラリ「flux slider」

Flux Slider
Flux Slider

画像などのコンテンツ表示を切り替える際にアニメーションエフェクトを利用することをトランジション効果というが、CSS3を駆使するとここまで色んな表現ができるんだ・・・と今更ながら驚いた。 http://www.joelambert.co.uk/flux/ 仕掛けはjQuery+CSS3 transitions(+CSS3 3D transform)なのだが、このサイトではトランジション効果をライブラリ化して配布しているので、折あれば有効活用させてもらいたいと思った。 ただ、ChromeとSafariのWebKit系ブラウザでは全トランジションが見れたが、IE9ではそもそもCSS3 transitionsに対応していないので×、Firefox4では3D transformやbackground-image関連のが動作しなかった。先日リリースされたFirefox5では、CSS3 Animationへの対応が行われたとのことなので、バージョンアップすればもっと見れるのが増えるかもしれない・・・が、FireMobileSimulatorやFirebugなどのアドオンがまだ5に対応していないので、アドオン対応待ちのところ。これからFirefoxもChromeみたいに6週間ごとにバージョンを上げるリリース方針になるらしいが、アドオン側の対応はそれに追従できるのだろうか・・・? 話が脱線したが、本題のCSS3のトランジション効果だが、ざっとクロスブラウジングしてみたところ、すべての効果に対応しているのはChromeとSafariだけっぽい。Operaはbackground-image系のやつは動いていたが、3D transform系は×だった。Firefox4は前述の通り。IE系は全滅ですな。 WebKit系で動くということはスマートホンでも動くのか? と思って見てみたら、3D transform効果以外のトランジションは動作してました(Android2.3)。

Leave a Reply

Your email address will not be published.