今日は表示・非表示するアニメーション。
表示する方だけでも使えるので、一部コピペでもどうぞ。
つくるのはこんな感じです。demo
JavaScriptで画面内にの出入りするときに表示・非表示するアニメーションを実装
まずHTMLから。
<ul class="box__list">
<li>
<dl>
<dt>Lorem ipsum dolor sit amet consectetur adipisicing elit. </dt>
<dd>
<img src="" alt="画像">
</dd>
</dl>
</li>
<li>
<dl>
<dt>Lorem ipsum dolor sit amet consectetur adipisicing elit. </dt>
<dd>
<img src="" alt="画像">
</dd>
</dl>
</li>
</ul>scssはこちら。
.box__list {
width: 90%;
margin: 0 auto;
li {
margin-bottom: 2rem;
dl {
display: flex;
justify-content: space-between;
align-items: center;
dt {
width: 52%;
}
dd {
width: 36%;
@include trans;
opacity: 0;
&.isActive {
opacity: 1;
}
}
}
&:nth-child(even) {
dl {
flex-direction: row-reverse;
}
}
}
}条件を満たした<dd>（画像）にクラス名（isActive）をつけるようにしているので、opacityを仕込んでおきます。
そしてメインとなるjs
let targets = document.querySelectorAll('.box__list li dd'); //アニメーションさせたい要素
const topLine = Math.floor(window.innerHeight * .35);
const underLine = Math.floor(window.innerHeight * .68);
//スクロールイベント
window.addEventListener('scroll', function () {
for(let i = 0; i < targets.length; i++) {
let targetTop = Math.floor(targets[i].getBoundingClientRect().top); //ターゲット要素の位置を取得
let targetBottom = Math.floor(targets[i].getBoundingClientRect().bottom); //ターゲット要素の位置を取得
if (targetTop < underLine && topLine < targetBottom) {
targets[i].classList.add('isActive');
} else {
targets[i].classList.remove('isActive');
}
}
});2,3行目の.35と.68は画面の何%でクラス名をつけたり消したりするかを指定しています。
あとは8,9行目でターゲットの上下の位置を取得して、それぞれがラインを超えた時に発火するようなイメージですね。
特定の要素が画面内に入ったらクラス名を付与してアニメーションを発火させる方法
ちなみに冒頭でお話しした、表示する方だけの時は下記jsでいけます。
$(window).on('load',function(){
let targets = document.querySelectorAll('.box__list li dd');
const underLine = Math.floor(window.innerHeight * .65);
//スクロールイベント
window.addEventListener('scroll', function () {
for(let i = 0; i < targets.length; i++) {
let targetTop = Math.floor(targets[i].getBoundingClientRect().top); //ターゲット要素の位置を取得
if (targetTop < underLine) {
targets[i].classList.add('isActive');
}
}
});
});結構使いどこはあるかと。ぜひお役立てください。
