スクロールしたら徐々に画像を表示させるCSSアニメーション

CSSアニメーション便利ですねー。
最近はjQueryではなくもっぱらCSSアニメーション!
最近見ていたサイトで、なにもないところからスクロールをしていくと画像が徐々に表示されてるサイトを見つけて、ええやんと思ったので実装方法を考えてみます。
今度サイト作るときに実装する際のメモです。

 

CSSアニメーションで画像を徐々に表示させる

まずはHTML。
 

<div class="img-anime">
<img src="画像のパス">
</div>

 

.img-anime{
overflow: hidden;
position: relative;
}

.img-anime:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
animation: img-anime 2s cubic-bezier(.4, 0, .2, 1) forwards;
background: #fff;
}

@keyframes img-anime {
100% {
transform: translateX(100%);
}
}

 

CSSアニメーションで画像の上に白いオブジェクトを乗せ、見えないようにして右に移動させて画像を表示するようにしています。

 

ただこれだけでは読み込んだ瞬間にアニメーションが実行されてしまいます。
なのでJSで実行タイミングを操作します。

 

( function() {
const image = document.querySelectorAll( '.img-anime' );
const observer = new IntersectionObserver( function( entries ) {
entries.forEach( function( entry ) {
if( entry.intersectionRatio > 0 ) {
entry.target.classList.add( 'img-animation' );
} else {
entry.target.classList.remove( 'img-animation' );
}
});});
Array.prototype.forEach.call( image, function( img ) {
observer.observe( img );
});
})();

コメント