티스토리 뷰
{
document.querySelectorAll(".content__item__desc").forEach(desc=>{
let descText = desc.innerText;
let descWrap = "<span>" + descText + "</span>";
desc.innerHTML = descWrap;
if(desc.classList.contains(".reveal")){
desc.innerHTML = descText
} else {
desc.innerHTML = descWrap;
}
})
function scroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY
const reveal = document.querySelectorAll(".reveal");
reveal.forEach(elem =>{
let revealOffetset = elem.offsetTop + elem.parentElement.offsetTop;
let revealDelay = elem.dataset.delay; //데이터가 있는지 없는지 dataset로 가져옴
//만약에 reveal 클래스가 있는데
//글씨를 span으로 감싸주고
//글씨를 다 넣어주기
if(scrollTop >= revealOffetset - window.innerHeight/2){
if(revealDelay == undefined){
elem.classList.add("show")
}else {
setTimeout(()=>{
elem.classList.add("show")
}, revealDelay)
}
}
})
document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll)
}
scroll();
}
'Script Sample > ParallaxEffect' 카테고리의 다른 글
Parallax Effect 06 - 스크롤링 효과 : 텍스트 효과 (0) | 2022.03.08 |
---|---|
Parallax Effect 05 - 스크롤링 효과 : 이질감 효과 (0) | 2022.03.08 |
Parallax Effect 04 - 스크롤링 효과 : 나타나기 (0) | 2022.03.08 |
Parallax Effect 03 - 스크롤링 효과 : 숨김 메뉴 (0) | 2022.03.08 |
Parallax Effect 02 - 스크롤링 효과 : 사이드 메뉴 (0) | 2022.03.08 |
댓글
© 2018 webstoryboy