以前カードをめくるような表現のサンプルを記載しましたが、改善版です。
要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。
カードの裏側が先に読み込まれ、表示されないようにしました。
下の画像をクリックしてください。
以下のようにjQueryにてCSSのアニメーションを発動させています。
$(window).load(function(){
$(".i2").each(function (i) {
$(this).attr('src',$(this).attr('data-src'));
});
$('.demo_div').on('click','.open_flg', function(e) {
$(this).addClass('close_flg').removeClass('open_flg');
$(this).find('.i1').addClass('ani1_1').removeClass('ani2_1');
$(this).find('.i2').addClass('ani1_2').removeClass('ani2_2');
});
$('.demo_div').on('click','.close_flg', function(e) {
$(this).addClass('open_flg').removeClass('close_flg');
$(this).find('.i1').addClass('ani2_1').removeClass('ani1_1');
$(this).find('.i2').addClass('ani2_2').removeClass('ani1_2');
});
});
カードのスタイルのサンプル
.demo_div{
width: 240px;
height:160px;
text-align:center;
position: relative;
top: 0;
left: 0;
margin: 10px;
float: left;
cursor: pointer;
}
.demo_div img{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
opacity:1.0;
border-radius: 10px;
}
以下はクリックされた時の裏返すアニメーションです。
@keyframes a1_1 {
0% {
transform: rotateY(0deg)
}
50% {
transform: rotateY(90deg);
opacity:1.0;
}
51% {
opacity:0.0;
}
100% {
opacity:0.0;
}
}
@keyframes a1_2 {
0% {
transform: rotateY(0deg)
opacity:0.0;
}
50% {
transform: rotateY(90deg);
opacity:0.0;
}
51% {
opacity:1.0;
}
100% {
transform: rotateY(0deg);
opacity:1.0;
}
}
.ani1_1{
animation: a1_1 0.5s forwards;
}
.ani1_2{
animation: a1_2 0.5s forwards;
}
以下は再度クリックされた時の戻るアニメーションです。
@keyframes a2_1 {
0% {
opacity:0.0;
transform: rotateY(0deg)
}
50% {
transform: rotateY(90deg);
opacity:0.0;
}
51% {
opacity:1.0;
}
100% {
transform: rotateY(0deg);
opacity:1.0;
}
}
@keyframes a2_2 {
0% {
transform: rotateY(0deg)
opacity:1.0;
}
50% {
transform: rotateY(90deg);
opacity:1.0;
}
51% {
opacity:0.0;
}
100% {
opacity:0.0;
}
}
.ani2_1{
animation: a2_1 0.5s forwards;
}
.ani2_2{
animation: a2_2 0.5s forwards;
}
HTMLは以下です。
<div class="demo_div"> <div class="open_flg"> <img class="i2" data-src="http://www.kipure.com/img/demo/cat/005.jpg" src="./162_files/005.jpg"> <img class="i1" src="./162_files/nuno_red.jpg"> </div> </div> <div class="demo_div"> <div class="open_flg"> <img class="i2" data-src="http://www.kipure.com/img/demo/cat/007.jpg" src=""> <img class="i1" src="http://www.kipure.com/img/demo/texture/nuno_red.jpg"> </div> </div> <div class="demo_div"> <div class="open_flg"> <img class="i2" data-src="http://www.kipure.com/img/demo/cat/004.jpg" src=""> <img class="i1" src="./162_files/nuno_red.jpg"> </div> </div>
トリガーをロードやスクロールに変更すれば、目を引く演出に応用可能です。
