画像をアニメーションで切り替えたい！オシャレに！ の詳細記事となります。
今回は【フリップ】でクルッと回転するアニメーションです。
実際の挙動は以下のようになります。
早速実装です！
1. HTMLの追加
<div class="animate js-animate" data-is-animated="false">
<div class="animate_item" data-animate-number="1">
<img src="image_1-1.jpg">
</div>
<div class="animate_item" data-animate-number="2">
<img src="image_1-2.jpg">
</div>
</div>
まずHTMLで、 切り替え前の画像 切り替え後の画像 を用意します。
それぞれ、上なのか下なのかがわかるようにdata属性を割り当てその外側にも状態管理用のdata属性を記載します。
image_1-1
image_1-2
2. CSSの追加
.animate {
position: relative;
}
.animate_item {
position: absolute;
transition: all .8s;
}
[data-is-animated="true"] [data-animate-number="1"],
[data-is-animated="false"] [data-animate-number="2"] {
transform: rotateY(90deg) scale(0.9);
transition-delay: 0s;
}
[data-is-animated="true"] [data-animate-number="2"],
[data-is-animated="false"] [data-animate-number="1"] {
transform: rotateY(0deg) scale(1);
transition-delay: .8s;
}
CSSではそれぞれの 切り替え前の画像 切り替え後の画像 に対して、表示するときのアニメーションなどの記載をします。
完成！
画像を可愛い猫にしてみました。
こんなにオシャレに！（猫がかわいい）画像切り替えが！（女の子ですよ...）簡単に！（見返り美人ですよねぇ）できちゃいました！（ふわふわでかわよ...）
あとは必要に応じてCSSでのレイアウトや、JavaScriptでのタイミングを調整すれば色々な見せ方ができると思います。
最後に
その他のアニメーション切り替え記事はこちら
【ブラシ】画像をアニメーションで切り替えたい！オシャレに！【塗りつぶし】
【斜め】画像をアニメーションで切り替えたい！オシャレに！【グリッド】
【スライド】画像をアニメーションで切り替えたい！オシャレに！【縦 横 斜め】
↧