JavaScript/Effect34 이펙트 응용편 - 마우스 이펙트 네번째 마우스 이펙트4 이번 마우스이펙트는 마우스가 움직일때 이미지가 움직입니다. centerPageX = window.innerWidth / 2 - mousePageX; 을 이용하여 가운데 사진의 좌표값을 지정합니다. 그후 GSAP를 이용하여 효과를 씁니다. JS 설명 gsap를 써서 마우스커서가 움직이게 작동했습니다. 코드 보기 gsap.to(imgMove, { duration: 0.5, left: centerPageX / 20, top: centerPageY / 20, }); 원본 소스 보기 원본 사이트 보기 2022. 9. 27. 이펙트 응용편 - 마우스 이펙트 세번째 마우스 이펙트3 이번 마우스이펙트는 마우스가 움직일때 원본 이미지가 보인는것입니다. background-attachment: fixed; 로 고정을 시킨후 e.pageX - circle.width / 2, 으로 동그란 원이 가운데로 가게했습니다. JS 설명 gsap를 써서 마우스커서가 움직이게 작동했습니다. 코드 보기 window.addEventListener("mousemove", (e) => { gsap.to(cursor, { duration: 0.6, left: e.pageX - circle.width / 2, top: e.pageY - circle.height / 2, }); }); 원본 소스 보기 원본 사이트 보기 2022. 9. 27. 이펙트 응용편 - 페럴럭스 오번째 페럴럭스 이펙트5 이번 페럴럭스 이펙트는 이질감 효과를 나타냈습니다. 원본 소스 보기 원본 사이트 보기 js 코드 설명 이질감을위해 offset1 변수를 만들어 현제 보이는 스크롤 탑 값과 각 요소의 offsetTop 값을 뺀 오차만큼 translateY 를 주어서 스크롤이 내려갈때마다 살짝 움직이는 이질감 효과를 만들었습니다. 조금더 자연스러운 효과를위해 gsap를 사용하여 훨씬 자연스럽게 했습니다. function scroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTo.. 2022. 9. 20. 이펙트 응용편 - 페럴럭스 네번째 페럴럭스 이펙트4 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. 원본 소스 보기 원본 사이트 보기 js 코드 설명 requestAnimationFrame을 이용하여 리소스의 과부화를 방지합니다. requestAnimationFrame 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. 또한 css 에서 show 를 이용한 애니메이션 처리를 하여 동적인 사이트가 되었습니다. let con = 0; // window.addEventListener("scroll", scrol.. 2022. 9. 19. 이펙트 응용편 - 페럴럭스 세번째 페럴럭스 이펙트3 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. 원본 소스 보기 원본 사이트 보기 js코드 설명 scrollProgress 함수를 만들어 setInterval 로 과부화를 방지후 스크롤을 위로 올리면 메뉴가 나오게 했습니다. function scrollProgress() { nowScroll = true; setInterval(() => { if (nowScroll) { nowScroll = false; hasScroll(); } }, 300); } function hasScroll() { let scrollTop = document.documentElement.scrollTop || window.. 2022. 9. 19. 이펙트 응용편 - 슬라이더 이펙트 네번째 이미지 버튼클릭으로 움직이기 이번 슬라이더 이펙트는 버튼 클릭식 이동하는 이펙트를 만들었습니다. JS 설명 gotoSlider 라는 함수를 만들어서 움직이게 만듭니다. 왼쪽,오른쪽 이벤트 리스너를 만들어 각 요소의 조건을 걸어 gotoSlider() 함수에 prevIndex 매개변수값을 넣습니다. 그렇게 되면 버튼이 클릭될때마다 자동적으로 변하게됩니다. 코드 보기 function gotoSlider(num) { sliderInner.style.transition = "all 400ms"; sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)"; currentIndex = num; } sliderBtnPrev.addEventList.. 2022. 9. 19. 이전 1 2 3 4 5 6 다음 728x90 반응형
