Tilted Content Slideshow - ぜひ見て欲しい！超格好いいスライドショー
何これ格好いい！
CSS3でアニメーションができるようになったとは言え、どこで使って良いものか悩んでしまいますよね。あまり使いすぎるとくどくなりますし、あまりに些細だと気付いても貰えない。
そんな中、一つの例としてTilted Content Slideshowを紹介します。カルーセル的にヘッダーコンテンツを切り替えるライブラリですが、その際のアニメーションが激しく格好いいのです！
Tilted Content Slideshowのデモ
ということで何はともあれまずは動画をご覧頂きたい！
画像が上下左右に移動して、さらに現れるという。二つの画像が全く同じ動きではなく、ちょっとずれているのがまたいい感じです。画像の並べ方はスタイルシートのクラスで指定できます。
さらにデザインはレスポンシブ。iPhoneで試すと次のような感じです。
カルーセルの動きは良くあるだけに、飽きられつつあります。Tilted Content Slideshowはかなりインパクトがあるのではないでしょうか。
Tilted Content Slideshowの使い方
HTML構造は次のようになります。
1.
## Tilted Content Slideshow
This slider, as seen on the landing page of the [FWA](http://www.thefwa.com/), plays with 3D perspective and performs some interesting animations on the right-hand side images.
[](http://grovemade.com/)
[](https://tsovet.com/)
:
2.
## Navigation
For the "line" navigation we use a little trick to make the clickable area a bit bigger: we add a thick white border to the top and bottom of the span. Since the border is part of the element, it will be part of the clickable zone.
[](http://minimalmonkey.com/)
[](http://www.herschelsupply.com/)
<!-- /slideshow -->
descriptionを繰り返すだけのシンプルな構造です。後はJavaScriptを実行します。
new TiltSlider( document.getElementById( 'slideshow' ) );
アニメーションは12種類用意されていて、ランダムの他、data-effect-in/data-effect-outによる指定もできるとのことです。
Webサイトの説明にカルーセルを使うとしたら、そこにアニメーションを組み込むとインパクトがかなり大きくなるのではないでしょうか。
Tilted Content SlideshowはJavaScript/CSS3のソフトウェア（ライセンスは独自。個人、商用利用可能）です。