これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow

Post on:2014年3月17日

sponsors

まずは、デモの一部をアニメーションgifにしたものから。
なにこのかっこいいスライダーは！！！って感じです。

コンテンツの各アイテムをふわりと浮かせて、斜めのクロスを軸にびゅーんとスライドさせるかなりかっこいいコンテンツスライダーを紹介します。
Appleのプロダクトページに使われそうなエフェクトですね。

アニメーションgifでは一部の動きなので、下記のデモページで他のエフェクトもお楽しみください。

アイデアの元となったのはFWAのランディングページで、こちらはさらにふわふわ浮いています。

実装方法は長いのでコードの紹介はここではしませんが、下記ページからコードをまるごとダウンロードできます。

スライドのアニメーションはCSS3で、各アイテムはdata属性を付与することでアニメーションをコントロールできるようになっています。