【jQuery】左から右に背景が伸びて画像が表示するアニメーション

ロッチくん

画像が出てくる前に背景画左から右に伸びてその後画像が表示されるアニメーションを実装したいニャン！

スクロールして画像のところに来たら背景が左から右に伸びてから画像が表示されるアニメーションをjQueryを使って実装してみたいと思います。

初めに
コード
ちょこっと解説

初めに

参考サイト集をみて色々な新しいサイトを見ていたらANATOMICAというフランスのブランドのオンラインストアのページがかっこよかったのでそちらで使用されていた上記動きを再現してみたくなりました。
ちなみにお洋服自体もかっこいいです。

私のほうで作ったデモページはこちら。

それでは具体的なコード見て行きましょう。

コード

HTML

<div id="wrapper">
    <section class="container">
        <p>↓↓↓↓↓↓　　下にスクロール　　↓↓↓↓↓↓</p>
        <ul>
            <li><span class="imgOuter"><img class="imgInner" src="./images/sample01.jpg" alt="サンプルイメージ1"></span></li>
            <li><span class="imgOuter"><img class="imgInner" src="./images/sample02.jpg" alt="サンプルイメージ2"></span></li>
            <li><span class="imgOuter"><img class="imgInner" src="./images/sample03.jpg" alt="サンプルイメージ3"></span></li>
        </ul>
    </section>    
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 200px;
  margin-bottom: 750px;
}
p {
  font-size: 16px;
  margin-bottom: 700px;
}
ul {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 15px;
}
ul li {
  max-width: 360px;
  width: 100%;
  height: 200px;
}
ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgOuter {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	display: block;
}

/* 出てくる画像 */
.imgAppear {
	animation: imgAppearAnime 1s .6s forwards;
	opacity: 0;
}

@keyframes imgAppearAnime {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/* 左から右へ動く背景 */
.bgLRAnime::before{
　animation: LRAnime 1s forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
  z-index: 1;
}
@keyframes LRAnime {
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

Javascript

function BgAnime() {

    // 背景色左から右が伸びて出現
    $('.imgOuter').each(function () { 
        let imgPos = $(this).offset().top - 30;
        let scroll = $(window).scrollTop();
        let windowHeight = $(window).height();
        if (scroll >= imgPos - windowHeight) {
            $(this).addClass('bgLRAnime');
        } else {
            $(this).removeClass('bgLRAnime');
        }
    });

    // 画像が出現
    $('.imgInner').each(function () { 
        let imgPos = $(this).offset().top - 30;
        let scroll = $(window).scrollTop();
        let windowHeight = $(window).height();
        if (scroll >= imgPos - windowHeight) {
            $(this).addClass('imgAppear');
        } else {
            $(this).removeClass('imgAppear');
        }
    });
}

$(window).scroll(function () {
    BgAnime();
});

$(window).on('load', function () {
    BgAnime();
});