본문 바로가기

Script Sample/Parallax Effect

(7)

Parallax Effect07 - 리빌 효과 //만약에 reveal 클래스가 있는데 //글씨를 span으로 감싸주고 //글씨를 다 넣어줘야 함 document.querySelectorAll(".content__item__desc.reveal").forEach((el,i)=>{ if(!(el.querySelector("span"))){ const text = el.innerText; el.innerHTML = `${text}`; } }); function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; const reveal = document.querySelectorAll(".reveal"); reveal.forEa..

Parallax Effect06 - 텍스트 효과 //section1 글씨 쪼개기 // let text = document.querySelector("#section1 .content__item__desc"); // let splitText = text.innerText; // let splitWrap = splitText.split('').join(""); // splitWrap = "" + splitWrap + ""; // text.innerHTML = splitWrap; //여러 section 글씨 쪼개기 document.querySelectorAll(".content__item__desc").forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').j..

Parallax Effect05 - 이질감 효과 function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); // const img = document.querySelector("#section1 .content__item__img") // img.style.transform = "translateY("+scrollTop/10+"px)" document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scro..

Parallax Effect04 - 나타나기 function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); document.querySelectorAll(".content__item").forEach(el => { if(scrollTop >= el.offsetTop -window.innerHeight/2){ el.classList.add("show"); } }) requestAnimationFrame(scroll) } scroll(); 패럴랙스 효과 01 Section1 단순하게..

Parallax Effect03 - 숨김 메뉴 document.querySelectorAll("#parallax__nav li a").forEach(li => { li.addEventListener("click", (e) => { e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior:"smooth" }) }) }) window.addEventListener("scroll", () => { let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; // 스크롤 값이 0보다 크면 show 클래스를 추가, 아니면 show 클래스 삭제 //..

Parallax Effect02 - 사이드 메뉴 이동 document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); //window.scroll(0, 1000); //window.scroll({left: 0, top: 1000}); //window.scroll({left: 0, top: 1000, behavior: "smooth"}); // window.scrollTo(0, 1000); // window.scrollTo({left: 0, top: 1000}); // window.scrollTo({left: 0, top: 1000, behavior: "smooth"}); // window.scrollBy(0, 1..

Parallax Effect01 - 메뉴 이동 //el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동 document.querySelectorAll("#parallax__nav li a").forEach(li => { li.addEventListener("click", (e) => { e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior:"smooth" }) }) }) window.addEventListener("scroll", () => { //3가지 방법을 합쳐서 씀. // let scrollTop = window.pageYOffset; // let scrollTop = document.documen..

이전 1 다음

티스토리툴바