seop's study seop's study

설명 현재 스크롤값에 따라서 섹션을 이동할때 섹션에 박스가 지나간 뒤 이미지와 텍스트가 나타납니다. 현재 스크롤값을 구한 뒤 각 섹션별 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 ..

설명 현재 스크롤값에 따라서 섹션을 이동할때 각 섹션에 있는 텍스트에 애니메이션 효과가 나타납니다. 현재의 스크롤 값에 따라 각 섹션의 offsetTop값에 도달하면 각각의 글자마다 span태그를 이용해 쪼개준 뒤 한글자 한글자씩 애니메이션 효과를 나타납니다. //여러개 글씨 쪼개기 - 웹표준을 준수하기 위해 쪼개기전 글과 라벨로 묶어줌 document.querySelectorAll(".content__item__desc").forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + ""; desc.innerHTML = splitWrap; d..

설명 현재 스크롤값에 움직임에 따라서 섹션을 이동할때 섹션에 있는 텍스트와 그림이 같이 움직입니다. 먼저 현재의 스크롤 값을 구한 뒤 현재의 스크롤 값에 따라 각 섹션의 이미지와 텍스트에 부드럽게 움직이는 애니메이션을 넣어줍니다. function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scro..

설명 현재 스크롤값에 따라서 섹션을 이동하면 섹션이 보이지 않다가 하나씩 나타납니다. 먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 숨겨놓았던 섹션에 애니메이션을 추가해준 뒤 나타나게 보여집니다. function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); document.querySelectorAll(".content__item").forEach(el => { if(..

설명 현재 스크롤값과 이전 스크롤값에 따라서 스크롤을 내릴땐 메뉴바가 숨어있지만 스크롤을 올리면 메뉴바가 나타납니다. 현재 스크롤값과 이전 스크롤값을 setInterval()메서드를 이용해 실시간으로 값을 구해준 뒤 현재스크롤 값이 이전 스크롤값 보다 높으면 스크롤이 내려가고 있는 것 입니다. 이때는 메뉴바를 숨겨놓습니다. 그리고 현재 스크롤 값이 이전 스크롤값 보다 작을경우 스크롤이 올라가고 있는 것 입니다. 이때는 메뉴바가 나타납니다. window.addEventListener("scroll", () => { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; document.querySe..

설명 현재 스크롤값에 따라서 섹션을 이동할때 사이드 메뉴에 섹션에 맞는 메뉴에 표시가 됩니다. 먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 사이드 메뉴에 표시가 됩니다. document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"}); }) }) window.addEventListener("scroll", () => { let scrollTop..

설명 현재 스크롤값에 따라서 섹션을 이동할때 섹션에 맞는 메뉴에 표시가 됩니다. 먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 메뉴에 표시가 됩니다. 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 = wind..