CSS3アニメーションでかっこよく画像表示させるオンラインツール・ジェネレーター『liffect』

2012.11.25 Category:Services Tag:Generator

24種類のCSS3アニメーションが使用でき、それぞれのエフェクトがとても素敵なのでどれにしようか迷う程。

ScrapBookへ書こうか迷いましたが、ScrapBookは、本当にさっくりとしか書かないので、こちらにメモとして残しておこうと思います。

ジェネレーター『liffect』

『liffect』

24種類のエフェクト、他にもDuration、Delay、Randomの機能があります。

それぞれの機能がどのように動くかは、直接ジェネレーターを動かしていただいたほうが、わかりやすいと思います。

使い方

使い方と言ってもたいそうなことはなく、エフェクトなど機能部分を選択した後、右下にあるGenerateボタンを押すだけ。

ボタンを押すと下の部分に以下のようなコードが生成されると思います。

HTML部分

<ul data-liffect="flip">
    <li><img src="images/1.jpeg" alt="Lion"></li>
    <li><img src="images/2.jpeg" alt="Lion"></li>
    <li><img src="images/3.jpeg" alt="Lion"></li>
</ul>

</ul>

CSS部分

ul[data-liffect="flip"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: flip 600ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-backface-visibility: visible;
    -moz-animation: flip 600ms ease both;
    -moz-animation-play-state: paused;
    -moz-backface-visibility: visible;
    -o-animation: flip 600ms ease both;
    -o-animation-play-state: paused;
    -o-backface-visibility: visible;
    animation: flip 600ms ease both;
    animation-play-state: paused;
    backface-visibility: visible;
}

ul[data-liffect="flip"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes flip {
    0% { opacity: 0;
        -webkit-transform: perspective(500px) rotateY(0);
        -webkit-animation-timing-function: ease-out; }
    40% {
        -webkit-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out; }
    50% {
        -webkit-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in; }
    80% {
        -webkit-transform: perspective(500px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in; }
    100% {
        opacity: 1;
        -webkit-transform: perspective(500px) scale(1);
        -webkit-animation-timing-function: ease-in; }
}

@-moz-keyframes flip {
    0% { opacity: 0;
        -moz-transform: perspective(500px) rotateY(0);
        -moz-animation-timing-function: ease-out; }
    40% {
        -moz-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -moz-animation-timing-function: ease-out; }
    50% {
        -moz-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);
        -moz-animation-timing-function: ease-in; }
    80% {
        -moz-transform: perspective(500px) rotateY(360deg) scale(.95);
        -moz-animation-timing-function: ease-in; }
    100% {
        opacity: 1;
        -moz-transform: perspective(500px) scale(1);
        -moz-animation-timing-function: ease-in; }
}

@-o-keyframes flip {
    0% { opacity: 0;
        -o-transform: perspective(500px) rotateY(0);
        -o-animation-timing-function: ease-out; }
    40% {
        -o-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -o-animation-timing-function: ease-out; }
    50% {
        -o-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);
        -o-animation-timing-function: ease-in; }
    80% {
        -o-transform: perspective(500px) rotateY(360deg) scale(.95);
        -o-animation-timing-function: ease-in; }
    100% {
        opacity: 1;
        -o-transform: perspective(500px) scale(1);
        -o-animation-timing-function: ease-in; }
}

@keyframes flip {
    0% { opacity: 0;
        transform: perspective(500px) rotateY(0);
        animation-timing-function: ease-out; }
    40% {
        transform: perspective(500px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out; }
    50% {
        transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in; }
    80% {
        transform: perspective(500px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in; }
    100% {
        opacity: 1;
        transform: perspective(500px) scale(1);
        animation-timing-function: ease-in; }
}

ul[data-liffect="flip"] li {

opacity: 0;

position: relative;

-webkit-animation: flip 600ms ease both;

-webkit-animation-play-state: paused;

-webkit-backface-visibility: visible;

-moz-animation: flip 600ms ease both;

-moz-animation-play-state: paused;

-moz-backface-visibility: visible;

-o-animation: flip 600ms ease both;

-o-animation-play-state: paused;

-o-backface-visibility: visible;

animation: flip 600ms ease both;

animation-play-state: paused;

backface-visibility: visible;

}

ul[data-liffect="flip"].play li {

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

-o-animation-play-state: running;

animation-play-state: running;

}

@-webkit-keyframes flip {

0% { opacity: 0;

-webkit-transform: perspective(500px) rotateY(0);

-webkit-animation-timing-function: ease-out; }

40% {

-webkit-transform: perspective(500px) translateZ(150px) rotateY(170deg);

-webkit-animation-timing-function: ease-out; }

50% {

-webkit-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);

-webkit-animation-timing-function: ease-in; }

80% {

-webkit-transform: perspective(500px) rotateY(360deg) scale(.95);

-webkit-animation-timing-function: ease-in; }

100% {

opacity: 1;

-webkit-transform: perspective(500px) scale(1);

-webkit-animation-timing-function: ease-in; }

}

@-moz-keyframes flip {

0% { opacity: 0;

-moz-transform: perspective(500px) rotateY(0);

-moz-animation-timing-function: ease-out; }

40% {

-moz-transform: perspective(500px) translateZ(150px) rotateY(170deg);

-moz-animation-timing-function: ease-out; }

50% {

-moz-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);

-moz-animation-timing-function: ease-in; }

80% {

-moz-transform: perspective(500px) rotateY(360deg) scale(.95);

-moz-animation-timing-function: ease-in; }

100% {

opacity: 1;

-moz-transform: perspective(500px) scale(1);

-moz-animation-timing-function: ease-in; }

}

@-o-keyframes flip {

0% { opacity: 0;

-o-transform: perspective(500px) rotateY(0);

-o-animation-timing-function: ease-out; }

40% {

-o-transform: perspective(500px) translateZ(150px) rotateY(170deg);

-o-animation-timing-function: ease-out; }

50% {

-o-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);

-o-animation-timing-function: ease-in; }

80% {

-o-transform: perspective(500px) rotateY(360deg) scale(.95);

-o-animation-timing-function: ease-in; }

100% {

opacity: 1;

-o-transform: perspective(500px) scale(1);

-o-animation-timing-function: ease-in; }

}

@keyframes flip {

0% { opacity: 0;

transform: perspective(500px) rotateY(0);

animation-timing-function: ease-out; }

40% {

transform: perspective(500px) translateZ(150px) rotateY(170deg);

animation-timing-function: ease-out; }

50% {

transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);

animation-timing-function: ease-in; }

80% {

transform: perspective(500px) rotateY(360deg) scale(.95);

animation-timing-function: ease-in; }

100% {

opacity: 1;

transform: perspective(500px) scale(1);

animation-timing-function: ease-in; }

}

JavaScript部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
$(document).ready(function () {
    var play = 0;
    $("ul[data-liffect] li").shuffleElements().each(function (i) {
        $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
                + "-moz-animation-delay:" + i * 300 + "ms;"
                + "-o-animation-delay:" + i * 300 + "ms;"
                + "animation-delay:" + i * 300 + "ms;");
        play++;
        if (play == $("ul[data-liffect] li").size()) {
            $("ul[data-liffect]").addClass("play")
        }
    });
});

jQuery.fn.shuffleElements = function () {
    var o = $(this);
    for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};</script>