かっこよくシュッと画像を表示させる【CSSアニメーション】

最近レスポンシブのサイトギャラリーを見いていたらスクロールでシュッとかっこよく画像を表示しているサイトをいくつか見かけたのでパクって実装したいな〜と思ったので書いてみました。

 

CSSアニメーションで画像をシュッと表示させる

まずはHTMLを書きます。
 

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

 
イメージをdivで囲うだけの簡単な作業。
divに位置指定して、その上にコンテンツを載せて最初は見えなくする仕様にします。
 
動きはCSSで実装します。

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

 
これでひとまず動きは完成です。
このままだと読み込んだ瞬間にアニメーションが始まってしまうので、実行タイミングを制御します。

 

スクロールしてコンテンツ領域に入ったときにCSSアニメーションを実行

$(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 );
});
})();

 

 

指定のボタンをクリックした時にCSSアニメーションを実行

「#btn」は、クリックの対象を指定してください。

$(function () {
$('#btn').click(function () {
$('.img-anime').toggleClass("after");
});
});

 

CSSアニメーションだのじいいいいいいいいいいいいいいいい