effect11 이펙트 응용편 - 서치 오번째 검색 이펙트 이번 이펙트는 별점이 있으며 별점을 누르면 속성을 볼수있습니다. JS코드 객체에 star 을 추가하고 switch문을 이용하여 별을 넣어줬습니다만, 별이들어있는 ul 태그안에 클래스 star 을 주어 li 순번과 data.star 이 일치하면 li안에있는 텍스트를 불러와서 넣어주기로 했습니다 그후 click 이벤트에서 star.innerText.slice(0, 1); 을 이용하여 n개 이상인것을 출력하게 했습니다. 코드 보기 { star: 1, name: "visibility", desc: "태그의 가시성을 결정합니다." }, const updateList = (list) => { listCSS = ""; for (const data of list) { let starCount = searc.. 2022. 9. 29. 이펙트 응용편 - 마우스 육번째 마우스 이펙트6 이번 이펙트는 마우스가 움직일때 글씨가 움직입니다. JS 설명 gsap를 이용한 애니메이션을 구성하였으며 positionSlow, positionFast는 현재 마우스 커서의 위치값 - 브라우저의 위치값 으로 구했습니다. 코드 보기 const mouseMove = (e) => { let positionSlow = (e.pageX - window.innerWidth / 2) * 0.1; let positionFast = (e.pageX - window.innerWidth / 2) * 0.2; gsap.to(".spanSlow", { duration: 0.4, x: positionSlow }); gsap.to(".spanFast", { duration: 0.4, x: -positionFast.. 2022. 9. 29. 이펙트 응용편 - 서치 이펙트 네번째 검색 이펙트 이번 이펙트는 각 css 제목과 설명을 배열안에있는 객체로 저장하여 출력했습니다. JS코드 keyup 을 통한 searchBox.value 를 가져와서 cssProperty 에있는 name 객체와 일치하면 출력이 되게했습니다. 코드 보기 //출력하기 cssProperty.map((e, i) => { searchList.innerHTML += `${e.name}`; searchNum.textContent = document.querySelectorAll(".search__list span").length; }); //입력하기 searchBox.addEventListener("keyup", (e) => { let searchWord = searchBox.value; findProperty(sea.. 2022. 9. 28. 이펙트 응용편 - 마우스 이펙트 오번째 마우스 이펙트5 transform 을 이용하여 마우스의 위치에따라 이미지의 각도가 바뀝니다. JS 설명 window.innerWidth / 2 - mousePageX; 를 이용하여 화면전체의 기준점을 가운데로 변경합니다. softPageX += (anglePageX - softPageX) * 0.4; 으로 마우스를 부드럽게 만들고, imgMove.style.transform을 이용하여 rotate 에 마우스의 위치값을 넣어줍니다. 코드 보기 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth / 2 - mousePageX; let centerPageY = win.. 2022. 9. 28. 이펙트 응용편 - 마우스 이펙트 네번째 마우스 이펙트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. 이전 1 2 다음 728x90 반응형
