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

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

デモのアニメーション

Tilted Content Slideshow

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

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

サイトのキャプチャ

デモページ

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

サイトのキャプチャ

FWA

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

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

top of page

©2017 coliss