티스토리 뷰
//숙제: 만약에 reveal 클래스가 있는 //글씨를 span으로 감싸주고 //글씨를 다 넣어줘야 함
//여러개 글씨 쪼개기
document.querySelectorAll(".content__item__desc").forEach(desc => { //글자(= desc) 선택(다중)
let splitText = desc.innerText; //.content__item__desc의 text값 가져오기
let splitWrap = splitText.split('').join(""); //.content__item__desc의 텍스트 한 글자 사이마다 삽입
splitWrap = "" + splitWrap + ""; //desc의 텍스트를 ~로 감싸줌
desc.innerHTML = splitWrap; //desc에 splitWrap값을 삽입
desc.setAttribute("aria-label", splitText); //splitText에 aria-label속성 값을 설정
});
function scroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
const reveal = document.querySelectorAll(".reveal");
reveal.forEach(elem => { //elem = reveal
let revealOffetset = elem.offsetTop + elem.parentElement.offsetTop;
let revealDelay = elem.dataset.delay;
if(scrollTop >=revealOffetset - window.innerHeight/2){
elem.classList.add("show"); //스크롤 할때 show가 붙음
}
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 samlpe > Parallax Effect' 카테고리의 다른 글
06. 패럴랙스 스크롤링 효과 : 텍스트 효과 (0) | 2022.03.11 |
---|---|
05. 패럴랙스 스크롤링 효과 : 이질감 효과 (0) | 2022.03.11 |
04. 패럴랙스 스크롤링 효과 : 나타나기 (0) | 2022.03.11 |
03. 패럴랙스 스크롤링 효과 : 숨김 메뉴 (0) | 2022.03.11 |
02. 패럴랙스 스크롤링 효과 : 사이드 메뉴 (0) | 2022.03.11 |
댓글
© 2018 webstoryboy