WPのプラグインを利用し、トップページの上部にスライド機能を取り付け、ふわっと画面が切り替わるものにした時の事でした。
画像が徐々に大きくなっていき、ふわっと切り替わるような、動画でよくあるようなものにしてほしいとのこと。
WPでスライド機能のプラグインはいくつかあるため、ふわっと切り替わるものは解決できるだろうけど、画像が徐々に大きくなっていくものまでついているプラグインは中々見つからないのではなかろうか？
ここの部分に関してはこの際、CSSで設定しようという話になったため、CSSでanimationを利用することになりました。
設定としては以下のような感じです。
@keyframes zoomUp {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.15);
}
}
li.active-slide img {
animation: zoomUp 4s linear 0s normal both;
}
プラグインで画像が切り替わる際にimgの親タグにactive-slideというクラスがつくとそのタグがレイヤー上部に上がりふわっと表示する対象となるようで、そのクラスがついたタグの子に当たるimgタグの画像はそのサイズが4s（4秒）かけて1.15倍ゆっくりと拡大するというアニメーションが作動する仕組みを用意しました。
いざ実際に動かしてみると確かに最初に表示した画像が徐々に大きくなるのを確認できました。
しかし、次の画像に切り替わるとき、異変が起きました。
次の画像に切り替わる一瞬、前に拡大していた画像が元サイズに戻る動作が見えたんです。そう、カクッとなるような感じで。
これは、次の画像に対象が移り、active-slideクラスが外れれば1.15倍サイズの機能は外れるわけで、その為もとのサイズに戻ったというわけです。
理想としては拡大していく様子のまま画面がふわっと切り替わることなんですよね。
それが次の画像が表示される若干の間にもとに戻る状態はちょっと格好悪い。
これはどう解決しようかと悩みました。
結果として、後ろに隠れているものは1.15倍の状態から表に映るまでの間、同じ4sさらに大きくなるanimationを充てるということにしました。
@keyframes moreZoomUp {
0% {
transform: scale(1.15);
}
100% {
transform: scale(1.20);
}
}
li:not(.active-slide) img {
animation: moreZoomUp 4s linear 0s normal both;
}
active-slideクラス以外のものは1.15倍からさらに拡大していく状態にしておき、active-slideクラスがついた場合、1.0から始まるという形にすると、違和感なく拡大していくままふわっと切り替わるスライドが確認できました。