<ul>
<li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
<li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
<li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
<li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
<li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
<li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
<li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
<li class="js-scroll-animation"><img width="1600" height="900" src="https://unsplash.it/1600/900" alt=""></li>
</ul>
ul{
display: flex;
flex-wrap: wrap;
}
li{
width: 50%;
padding: 20px;
box-sizing: border-box;
/* 透過・非表示 */
opacity: 0;
visibility: hidden;
/* 要素の位置指定・アニメーション */
translate: 0 20px;
transition: 1s;
}
img{
width: 100%;
height: auto;
}
/* クラス付与で表示する */
.is-active{
opacity: 1;
visibility: visible;
translate: 0 0;
}
//要素を取得
const animations = document.querySelectorAll('.js-scroll-animation');
function toggle() {
animations.forEach((animation) => {
//ウィンドウの高さを取得
const height = window.innerHeight;
//スクロール量を取得
const scroll = window.scrollY;
//要素の位置を取得
const target = scroll + animation.getBoundingClientRect().top;
//スクロール位置を判定して要素にクラスを付与
if (scroll > target - height / 1.5) {
animation.classList.add('is-active');
}
});
}
//ロード時に発火
window.addEventListener('load', toggle);
//スクロール時に発火
window.addEventListener('scroll', toggle);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.