jQueryとCSS カードをクリックでめくる表現

jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。

以前カードをめくるような表現のサンプルを記載しましたが、改善版です。

要素をコピペで量産、順番を変えても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>

トリガーをロードやスクロールに変更すれば、目を引く演出に応用可能です。