【CSS3】Transitions & Transforms アニメーション

Modernizrのサポートを得て、グレースフルデグレデーションを実現したバージョン

by tea4two

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<header>Yet Another Flip Photo Gallery</header>
<ul id="photo">
    <li class="group slide">
        <div class="inner">
            <img src="http://lorempixel.com/150/150/nightlife/7/">
            <div class="detail">
                 <h3>ばぁ</h3>

                <p>夜のバーである。オヤジが知ったふうな口でウイスキーを語るのだが、知識が浅はかなこと甚だしい。</p>
            </div>
        </div>
    </li>
    <li class="group slide">
        <div class="inner">
            <img src="http://lorempixel.com/150/150/technics/2/">
            <div class="detail">
                 <h3>DJ</h3>

                <p>世の中デジタル化のせいで、猫も杓子も馬鹿もDJである。アナログのスクラッチこそ真髄と思い知れ。</p>
            </div>
        </div>
    </li>
    <li class="group slide">
        <div class="inner">
            <img src="http://lorempixel.com/150/150/food/9/">
            <div class="detail">
                 <h3>バーガー</h3>

                <p>こんなものばかり食っていては、早死するばかりである。和食こそ美なり。</p>
            </div>
        </div>
    </li>
    <li class="group slide">
        <div class="inner">
            <img src="http://lorempixel.com/150/150/cats/4/">
            <div class="detail">
                 <h3>にゃん</h3>

                <p>腹が減ったら、軒先に現れる。なんともふてぶてしい猫である。可愛いので許す。</p>
            </div>
        </div>
    </li>
</ul>

CSS

header {
    background: orange;
    margin-bottom: 30px;
    padding: 10px 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-family: Helvetica, san-serif;
}
img {
    vertical-align: bottom;
}
#photo {
    width: 320px;
    margin: 0 auto;
}
#photo li {
    margin: 5px;
    float: left;
    position: relative;
}
#photo li img {
    display: block;
}
#photo li .detail {
    position: absolute;
    background: #fff;
    width: 150px;
    height: 150px;
    bottom: 0;
}
#photo li .detail h3 {
    padding: 10px 0;
    margin-bottom: 10px;
    text-align: center;
    color: purple;
    font-size: 120%;
    font-weight: bold;
}
#photo li .detail p {
    line-height: 110%;
    font-size: 80%;
}

/* for newer browser */
.flip {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
}
.flip .inner {
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -moz-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.flip .flipper,
.flip .detail {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flip img,
.flip .detail {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* for older browser */
#photo li.regacy {
    overflow: hidden;
}
#photo li.regacy .detail {
    bottom: -150px;
}

JavaScript

//modernizrによる transformサポートの検知
if ($('html').hasClass('csstransforms3d')) {
    //サポート有り
    $('.group').removeClass('slide').addClass('flip');
    $('.group').hover(
        function () {
            $(this).find('.inner').addClass('flipper');
        },
        function () {
            $(this).find('.inner').removeClass('flipper');
        }
    );
} else {
    //サポート無し
    $('.slide').addClass('regacy');
    $('.group').hover(
        function() {
            $(this).find('.detail').stop()
                .animate({'bottom':0}, 500, 'easeOutCubic');
        },
        function() {
            $(this).find('.detail').stop()
                .animate({'bottom': -($(this).height() + 'px')}, 500, 'easeOutCubic');
        }
    );
}