엘리먼트 페이드 인 스크롤 PURE 바닐라 자바 ​​스크립트

Question

스크롤 할 때 엘리먼트가 점점 희미하게 보이기를 바랍니다. 캐치는 순수 바닐라 자바 ​​스크립트에서 필요합니다 ... 절대 jquery. 내가 온라인에서 찾고있는 모든 것은 jquery에있다. 그것은 투쟁이다. 내 animation에 tweenMax를 사용하고 있습니다. 도움을 미리 요청해 주셔서 감사합니다.

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

Answer 1

여기서는 CSS를 사용하여 페이드 인/아웃합니다.

스크롤 할 때 요소가 뷰포트인지 확인하고, 그렇다면 클래스를 inview에 추가합니다. 그렇지 않으면 제거합니다. 페이드 인되도록 선택기를 변경하여 inview 클래스를 제외 할 수 있습니다. `window.scroll` 경우에이

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; 
 
}