JavaScript/Effect34 이펙트 응용편 - 마우스 이펙트 두번째 마우스 이펙트2 이번 마우스 이펙트는 mousemove 이벤트를 이용하여 브라우저 요소의 좌표 값과 속성을 제어하는것을 배웠습니다. 마지막으로 화면안에 소스보기를 통한 소스를 볼수있습니다. JS 설명 gsap를 써서 마우스커서가 움직이게 작동했습니다. 코드 보기 window.addEventListener("mousemove", (e) => { gsap.to(cursor, { duration: 0.3, left: e.pageX - 5, top: e.pageY - 5 }); gsap.to(cursor2, { duration: 0.8, left: e.pageX - 15, top: e.pageY - 15 }); }); 원본 소스 보기 원본 사이트 보기 2022. 9. 19. 이펙트 응용 편 - 페럴럭스 이펙트 두 번째 페럴럭스 이펙트2 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. 원본 소스 보기 원본 사이트 보기 scroll관련 코드들 간단요약 먼저 scrollTop 에 조건을 걸어 모든 웹브라우저에 스크롤값을 구합니다. let scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY; scroll.innerText = Math.round(scrollTop); content__item 클래스를 이용해 각 요소의 offsetTop 값을 찾아서 #parallax__dot 에있는 li 에 효과를 입혀줍니다. 또한 forEach는 0부.. 2022. 9. 8. 이펙트 응용하기 | 페럴럭스 이펙트 첫 번째 페럴럭스 이펙트 offsettop 와 scrollTop을 이용하여 메뉴 선택창이 해당 메뉴에 진입되었을때 색이 바뀌는 효과를 만들어 보았습니다. 하지만 이런경우는 대부분 과부화를 일으키기 때문에 조심히 사용하는게 좋을것 같습니다. 원본 소스 보기 원본 사이트 보기 scroll관련 코드들 간단요약 먼저 scrollTop 에 조건을 걸어 모든 웹브라우저에 스크롤값을 구합니다. let scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY; scroll.innerText = Math.round(scrollTop); 이제 각 section 에 있는 아이디값을 찾아 이전에 구한 scrollTop 와 세션에있는 of.. 2022. 9. 6. 이펙트 응용편 | 마우스 이펙트 첫 번째 마우스 이펙트 이번 마우스 이펙트는 mousemove 이벤트를 이용하여 브라우저 요소의 좌표 값과 속성을 제어하는것을 배웠습니다. 마지막으로 화면안에 소스보기를 통한 소스를 볼수있습니다. 원본 소스 보기 원본 사이트 보기 2022. 9. 6. 슬라이드 이펙트 세 번째 이미지 좌우로 움직이기 이번 슬라이더 이펙트는 slider__inner 클래스 div 을 만들어서 img의 width * 갯수 로하여서 전체 width값을 잡아줍니다. 또한 상위 slider__img 를 이용해 overflow: hidden; 을 주어서 넘치는 영역을 안보이게합니다. js를 이용하여 sliderInner.style.transition = "all 0.6s" 을 주어서 애니메이션 효과를 넣고 setInterval 이용하여 slider__inner 의 위치를 img의 width 값에 맞게 변경해줍니다. 그리고 다시 첫번째로 자연스럽게 가기위해서 마지막 이미지를 다시 첫번째로 한 후 setTimeout 을이용하여 자연스럽게 만들어줍니다. 또한 Gasp 와 jquery 를이용하여 만들어봤으니 자.. 2022. 9. 2. 슬라이더 이펙트 두번째 - 좌우로 보여주기 이미지 좌우로 움직이기 이번 슬라이더 이펙트는 slider__inner 클래스 div 을 만들어서 img의 width * 갯수 로하여서 전체 width값을 잡아줍니다. 또한 상위 slider__img 를 이용해 overflow: hidden; 을 주어서 넘치는 영역을 안보이게합니다. js를 이용하여 sliderInner.style.transition = "all 0.6s" 을 주어서 애니메이션 효과를 넣고 setInterval 이용하여 slider__inner 의 위치를 img의 width 값에 맞게 변경해줍니다. 또한 Gasp 와 jquery 를이용하여 만들어봤으니 자세한 내용은 아래에있는 소스보기를 통하여 봐주시면되겠습니다. 원본 소스 보기 원본 사이트 보기 2022. 8. 29. 이전 1 2 3 4 5 6 다음 728x90 반응형
