Effect/퍼럴랙스7 패럴렉스 이펙트 07 패럴랙스 이펙트 - 리빌 효과 원본 페이지 보기 원본 소스 보기 script 코드 function scroll() { let scrollTop = window.scrollY; 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) { // el.classList.add("show"); // } if (scrollTop >= revealOffset - wind.. 2022. 10. 10. 패럴렉스 이펙트 06 패럴랙스 이펙트 - 텍스트 효과 원본 페이지 보기 원본 소스 보기 script 코드 //글씨 쪼개기 // let text = document.querySelector("#section01 .content__item__desc"); // let splitText = text.innerText; // let splitWrap = splitText.split('').join('''); // text.innerHTML = splitWrap = "'" + splitWrap + "'"; // 글씨 쪼개기(다중이) document.querySelectorAll(".split").forEach(text => { let splitText = text.innerText; let splitWrap = splitText.sp.. 2022. 10. 7. 퍼럴랙스 이펙트 05 패럴랙스 이펙트 05 - 이질감 효과 원본 페이지 보기 원본 소스 보기 script 코드 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; function scroll(){ let scrollTop = window.pageXOffset || document.documentElement.scrollTop || window.screenY; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".c.. 2022. 9. 20. 퍼럴랙스 이펙트 04 패럴랙스 04 원본 페이지 보기 원본 소스 보기 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; script 코드 // 재귀함수 function scroll() { let scrollTop = window.pageXOffset || document.documentElement.scrollTop || window.screenY; document.querySelectorAll(".content__item").forEach(item => { if (scrollTop > item.offsetTop - window.innerHeight .. 2022. 9. 19. 퍼럴랙스 이펙트 03 패럴랙스 03 원본 페이지 보기 원본 소스 보기 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; script 코드 // 0 보다 크면 메뉴바가 내려옴 if (scrollTop > 0) { document.querySelector("#parallax__nav").classList.add("show") } else { document.querySelector("#parallax__nav").classList.remove("show") } document.querySelector("#parallax__info span").innerT.. 2022. 9. 12. 퍼럴랙스 이펙트 02 패럴랙스 02 원본 페이지 보기 원본 소스 보기 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; script코드 //preventDefault a링크를 차단시켜줌 document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); document.querySelector(el.getAttribute("href")).scrollIntoView({ behavior: "smooth" }); }.. 2022. 9. 12. 퍼럴랙스 이펙트 01 패럴랙스 01 원본 페이지 보기 원본 소스 보기 Java 스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; 메뉴 이펙트 주기 // for문 for (let i = 1; i <= 9; i++) { if (scrollTop >= document.getElementById("section" +i).offsetTop) { document.querySelectorAll("#parallax__nav li").forEach(li => { li.classList.remove("active") }); document.querySelector(.. 2022. 9. 6. 이전 1 다음
