【CSS3】Transition & Transforms 写真ギャラリーデモ

ギャラリーデモ

by tea4two

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<header>Photo Gallery</header>
<ul id="photo">
    <li>
        <img src="http://lorempixel.com/200/200/sports/2/">
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/city/6/">
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/people/6/">
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/technics/1/">
    </li>
</ul>
<p id="btn"><a href="#">Next Image</a>
</p>

CSS

header {
    background: #755;
    padding: 8px 0;
    text-align: center;
    color: #fff;
    font-family: Georgia, Times, serif;
    font-size: 120%;
}
#photo {
    width: 200px;
    height: 200px;
    margin: 30px auto;
    position: relative;
    
    /* 3Dtransformation */
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
#photo li {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#photo li img { vertical-align: bottom; }
/* アニメーション設定 */
@-webit-keyframes galAnim {
    0% { opacity: 1; }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(5,5,5);/*5倍*/
    }
}
@-moz-keyframes galAnim {
    0% { opacity: 1; }
    100% {
        opacity: 0;
        -moz-transform: scale3d(5,5,5);/*5倍*/
    }
}
@-o-keyframes galAnim {
    0% { opacity: 1; }
    100% {
        opacity: 0;
        -o-transform: scale3d(5,5,5);/*5倍*/
    }
}
@keyframes galAnim {
    0% { opacity: 1; }
    100% {
        opacity: 0;
        transform: scale3d(5,5,5);/*5倍*/
    }
}

/* アニメーションをさせる要素
    JSにて .animated を LI に付ける。
*/
.animated {
    -webkit-animation: galAnim .4s ease-in-out;
    -moz-animation: galAnim .4s ease-in-out;
    -o-animation: galAnim .4s ease-in-out;
    animation: galAnim .4s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ボタン */
#btn a {
    display: block;
    width: 200px;
    margin: 0 auto;
    text-align: center;
    padding: 5px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: orange;
    text-decoration: none;
    color: #fff;
}
#btn a:hover {
    background: brown;
}

JavaScript

var _galChild = $('#photo li'),
        _galLeng = _galChild.length,
        _z = 1000,
        _btn = $('#btn a');

    //整列function
    function aligner() {
        for (var i = 0; i < _galLeng; i++) {
            $('#photo li').eq(i).css({
                'z-index': _z
            });
            _z -= 10;
        }
        _z = 1000;
    }
    //init
    aligner();

    //ボタンクリックfunction
    _btn.on('click', function () {
        console.log('button clicked!');
        $('#photo li').eq(0).addClass('animated');
         $('.animated').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {
            $('#photo').append($(this));
            $(this).removeClass('animated');
            aligner();
        });
        return false;
    });