ITエンジニア/デザイナ向けにオープンソースを毎日紹介

何これ格好いい!

CSS3でアニメーションができるようになったとは言え、どこで使って良いものか悩んでしまいますよね。あまり使いすぎるとくどくなりますし、あまりに些細だと気付いても貰えない。

そんな中、一つの例としてTilted Content Slideshowを紹介します。カルーセル的にヘッダーコンテンツを切り替えるライブラリですが、その際のアニメーションが激しく格好いいのです!

Tilted Content Slideshowのデモ

この上の部分が切り替わります。画像だと分かりづらいですよね。
この上の部分が切り替わります。画像だと分かりづらいですよね。

ということで何はともあれまずは動画をご覧頂きたい!

画像が上下左右に移動して、さらに現れるという。二つの画像が全く同じ動きではなく、ちょっとずれているのがまたいい感じです。画像の並べ方はスタイルシートのクラスで指定できます。

さらにデザインはレスポンシブ。iPhoneで試すと次のような感じです。

カルーセルの動きは良くあるだけに、飽きられつつあります。Tilted Content Slideshowはかなりインパクトがあるのではないでしょうか。

Tilted Content Slideshowの使い方

HTML構造は次のようになります。

<div class="slideshow" id="slideshow">
    <ol class="slides">
        <li class="current">
            <div class="description">
                <h2>Tilted Content Slideshow</h2>
                <p>This slider, as seen on the landing page of the <a href="http://www.thefwa.com/">FWA</a>, plays with 3D perspective and performs some interesting animations on the right-hand side images.</p>
            </div>
            <div class="tiltview col">
                <a href="http://grovemade.com/"><img src="img/1_screen.jpg"/></a>
                <a href="https://tsovet.com/"><img src="img/2_screen.jpg"/></a>
            </div>
        </li>
        :
        <li>
            <div class="description">
                <h2>Navigation</h2>
                <p>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.</p>
            </div>
            <div class="tiltview row">
                <a href="http://minimalmonkey.com/"><img src="img/5_mobile.jpg"/></a>
                <a href="http://www.herschelsupply.com/"><img src="img/6_mobile.jpg"/></a>
            </div>
        </li>
    </ol>
</div><!-- /slideshow -->

descriptionを繰り返すだけのシンプルな構造です。後はJavaScriptを実行します。

new TiltSlider( document.getElementById( 'slideshow' ) );

アニメーションは12種類用意されていて、ランダムの他、data-effect-in/data-effect-outによる指定もできるとのことです。

Webサイトの説明にカルーセルを使うとしたら、そこにアニメーションを組み込むとインパクトがかなり大きくなるのではないでしょうか。

Tilted Content SlideshowはJavaScript/CSS3のソフトウェア(ライセンスは独自。個人、商用利用可能)です。

Tilted Content Slideshow

Tilted Content Slideshow | Codrops

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2