要素がスクロールでフェードインします。バニラのjavascript

Question

スクロールすると要素がフェードインするようになりました。キャッチは純粋なバニラのjavascriptでそれを必要としている...絶対にjquery。私がオンラインで探しているものはすべて、jqueryにあります。これは苦闘です。私は私のアニメーションのためにtweenMaxを使用しています。あなたの助けを事前に感謝します。

if(window.scrollY > 550){ 
    TweenMax.staggerFromTo(newProduct, 1, {opacity:0}, {opacity:1}, 0.5); 
} 

Answer 1

ここでは、フェードイン/アウトにCSSを使用しました。

スクロールでは、要素がビューポートかどうかを確認します。その場合はクラスを追加します。それ以外の場合は削除します。フェードインするようにしたい場合は、セレクタを変更してinviewクラスを除外することができます。

let section = document.createElement('section'); 
 
document.body.appendChild(section); 
 
for (let x = 1; x <= 100; x ++) { 
 
    let d = document.createElement('div'); 
 
    d.innerText = `Hello there div line ${x} of 100`; 
 
    section.appendChild(d); 
 
} 
 
    
 
function inView (el) { 
 
    var sb = section.getBoundingClientRect(); 
 
    var eb = el.getBoundingClientRect(); 
 
    return !((eb.top + eb.height < 0) || (eb.top > sb.height)); 
 
} 
 

 
function updateInView() { 
 
    for (x of document.querySelectorAll('div')) { 
 
    if (inView(x)) x.classList.add('inview') 
 
    else x.classList.remove('inview'); 
 
    } 
 
} 
 

 
section.onscroll = updateInView; 
 

 
updateInView();

div { 
 
    opacity: 0.0; 
 
    transition: opacity 1s; 
 
} 
 

 
div.inview { 
 
    opacity: 1; 
 
} 
 

 
section { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background: black; 
 
    color: yellow; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
}