最近cssでサイトに動きをつけるやり方をちょこちょこ調べていろいろ試しています。
cssってすごい進化していたんですね。アイデア次第ではけっこうおもしろいことができそうです。
ということで今回はそのcssで遊んでいてひらめいたscaleを使ってカードを裏返すような感じの演出をやってみたいと思います。
裏返す動きはカードを真上から見たときにカードの幅がだんだん細くなり完全に真横になって、そして裏面が見えてくるという感じです。
なのでそれっぽく見せるには要素をだんだん細くして一番最小になったら裏面の内容に書き換えるという感じになります。
ということでまずはcssで縮んで戻るような動きを作ります。
@keyframes change-scaleX {
0% {
transform: scaleX(1);
}
50% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.flip {
animation: change-scaleX 1s;
}
@keyframesというのを使うと複数のアニメーションを時間の割合を指定して切り替えて使えるようです。これは1秒で縮んで戻る動きになっています。
で、この一番縮んでいるタイミング(0.5秒)で表示されている画像や文字などを入れ替えれば裏返っているように見えます。
なのでそのタイミングで切り替えるようにjavascriptのsetTimeoutを使って処理を書きます(innerHTMLを書き換えたりしてください)。
setTimeout(function(){
//要素の入れ替えの処理を書く
}, 500);
これでクリックしたらカードをひっくり返したように見せることができます。
簡単に作れるわりにけっこうインパクトあると思うのでうまく使えば良い演出になると思います。