
설명 현재 스크롤값에 움직임에 따라서 섹션을 이동할때 섹션에 있는 텍스트와 그림이 같이 움직입니다. 먼저 현재의 스크롤 값을 구한 뒤 현재의 스크롤 값에 따라 각 섹션의 이미지와 텍스트에 부드럽게 움직이는 애니메이션을 넣어줍니다. 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..

설명 마치 이미지의 시선이 마우스 포인터를 향하게 3D효과를 내는 것 입니다. transform-style: preserve-3d를 이용해 효과를 만들어 보았습니다. transform-style: preserve-3d란? transform-style: preserve-3d속성 은 요소의 자식이 3D 공간에 배치되는지 또는 요소 평면에서 병합되는지 여부를 설정합니다. 평면화하면 요소의 자식은 3D 공간에서 자체적으로 존재하지 않습니다. 이 속성은 상속되지 않으므로 요소의 모든 비-리프 하위 항목에 대해 설정해야 합니다. const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e) { //마우스 좌..

마우스 이벤트 mouseover메서드와 mouseenter메서드, mouseout메서드와 mouseleave의 차이점 mouseover메서드와 mouseenter메서드, mouseout메서드와 mouseleave의 차이점으로는 자식 요소들까지 영향을 주느냐 안 주느냐의 차이 입니다. 깊이의 차이라고 할 수 있습니다. 마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 차이라고 이해하시면 좋을 것 같습니다. mouseover와 mouseoout은 마우스 이동할때마다 이벤트 발생 하는 반면, mouseenter와 mouseleave는 이벤트 영역을 진입 혹은 벗어났을때만 이벤트를 발생 합니다. move your mouse move y..

설명 마우스 이펙트 이미지 효과는 마우스를 따라서 이미지가 움직이는 효과 입니다. 이 효과를 내기 위해서는 먼저 마우스의 좌표값을 중앙으로 초기화 시킨 후(x축:0, y축:0) 중앙을 기준으로 이미지가 움직이게 됩니다. 마우스 좌표값 초기화 방법 마우스 좌표값을 중앙으로 초기화 방법은 화면 전체 가로값 - (화면 전체 가로값/2) 를 하시면 됩니다. //실제 마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 값을 가운데로 초기화 후 좌표값 //전체 길이/2 - 마우스 x좌표값 == 0 let centerPageX = window.innerWidth/2 - mousePageX; let centerPageY = window.inner..

이벤트 버블링이란? 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다. FORM DIV P 가장 안쪽의 를 클릭하면 순서대로 다음과 같은 일이 벌어집니다. 에 할당된 onclick 핸들러가 동작합니다. 바깥의 에 할당된 핸들러가 동작합니다. 그 바깥의 에 할당된 핸들러가 동작합니다. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다. 거의 모든 이벤..