オーバーレイされて出てくる画像
概要
画像左側から表示され、その後オーバーレイが右側に縮小していくというアニメーションです。
少し変化をつけながら画像を表示させることで、目に留まりやすくなります。
実装は、scaleを使って表現しています。オーバーレイはfigureタグ（imgタグには擬似要素はつけられないため）の擬似要素で作成しています。
デフォルトでは、figureタグはscale: 0 1;によって、x方向に0倍になり見えなくなっており、.is-activeクラスがつくことでscale: 1 1;に変わることで、むにゅっとオーバーレイに覆われた状態で表示されます。その後、同じ原理でオーバーレイ（figureタグの擬似要素::before）のscaleを変更させ、画像が出てくるようにしました。
オーバーレイ側のアニメーションはtransition-delayで開始タイミングを調整しています。
WordPressの画像ブロックも同じHTML構造なので、該当するクラスにコードサンプルのようなCSSを記述すれば、同じようにアニメーション可能です。
コードサンプル
HTML
<figure class="figure js-scroll-anim">
<img
src="/wp-content/themes/portfolio/assets/images/sample_img01.png"
alt="サンプル画像"
width="450" height="300" loading="lazy" decoding="async"
>
</figure>CSS
.figure {
--img-anim-time: 0.6s;
--ease: cubic-bezier(0.65, 0, 0.35, 1);
position: relative;
width: 70%;
height: auto;
text-align: center;
scale: 0 1; /* 最初はx方向は倍率0 */
}
.figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.figure.is-active {
scale: 1 1; /* activeになったらスケールを1倍にする */
transition: scale var(--img-anim-time) var(--ease);
transform-origin: left center;
}
.figure::before {
position: absolute;
inset: 0;
content: "";
background-color: #7d8797;
}
.figure.is-active::before {
scale: 0 1; /* オーバーレイのx方向の倍率を0にし非表示にする */
transition: scale 0.6s var(--ease);
transition-delay: var(--img-anim-time); /* 画像のアニメーション時間分開始をずらす */
transform-origin: right center;
}JavaScript
document.addEventListener("DOMContentLoaded", function () {
const scrollTriggers = document.querySelectorAll(".js-scroll-anim");
const revealObserver = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("is-active");
revealObserver.unobserve(entry.target);
}
});
},
{
threshold: 0.1,
}
);
scrollTriggers.forEach(el => {
revealObserver.observe(el);
});
});