티스토리 뷰
설명
현재 스크롤값에 따라서 섹션을 이동할때 섹션에 박스가 지나간 뒤 이미지와 텍스트가 나타납니다.
현재 스크롤값을 구한 뒤 각 섹션별 offsetTop값에 도달하면 css를 이용해 박스모션이 지나간 뒤 이미지와 텍스트가 나타납니다.
리빌 효과의 포인트는 박스의 출발지점 위치를 잡는것이 포인트 입니다.
//만약에 .reveal 클래스가 있으면 글씨를 span으로 감싸주고 글씨를 다시 넣어줘야 함
let desc = document.querySelectorAll(".content__item__desc")
desc.forEach(el => {
let reveal = el.innerText;
if(el.classList.contains("reveal") == true){
reveal = "" + reveal + ""
el.innerHTML = reveal
}
})
function scroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
const reveal = document.querySelectorAll(".reveal");
reveal.forEach(el => {
let revealOffset = el.offsetTop + el.parentElement.offsetTop;
let revealDelay = el.dataset.delay;
if(scrollTop >= revealOffset - window.innerHeight/1.3){
if(revealDelay == undefined){
el.classList.add("show");
} else {
setTimeout(() => {
el.classList.add("show");
}, revealDelay)
}
}
})
requestAnimationFrame(scroll)
}
scroll();
'Script Sample > Parallax Effect' 카테고리의 다른 글
Parallax Effect - 텍스트 효과 (0) | 2022.03.11 |
---|---|
Parallax Effect - 이질감 효과 (0) | 2022.03.11 |
Parallax Effect - 나타나기 효과 (0) | 2022.03.11 |
Parallax Effect - 숨김 메뉴 (0) | 2022.03.11 |
Parallax Effect - 사이드 메뉴 이동 (0) | 2022.03.11 |
댓글
© 2018 webstoryboy