JavaScript/Effect34 이펙트 용용편 - 서치 육번째 검색 이펙트 이번 이펙트는 정렬하는 기능을 구현했습니다. JS코드 sort를 이용하여 정렬을 구현했습니다. 코드 보기 //반대로 정렬 function sortReverse() { cssProperty.reverse(); updateList(); } // 내림차순 function sortDescending() { cssProperty.sort((a, b) => b.num - a.num); updateList(); } // 오름차순 function sortAscending() { cssProperty.sort((a, b) => a.num - b.num); updateList(); // 알파벳(a-z) 정렬 function sortAlphabet() { cssProperty.sort(function (a, b.. 2022. 10. 21. 이펙트 응용편 - 서치 오번째 검색 이펙트 이번 이펙트는 별점이 있으며 별점을 누르면 속성을 볼수있습니다. 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 코드 설명 글자 하나하나마다 효과를주기위해서 split를 이용하여 자르고 join을 이용하여 span 태그를 주었습니다. 스크롤시 해당하는 위치값이 되면 애니메이션 효과를주기위해 item.querySelector(`.split span:nth-child(${index + 1})`).style.transitionDelay = `${index * 100}ms`; 이용했습니다. //글씨 나누기 document.querySelectorAll(".split").forEach((text) => { let splitText = text.innerText; .. 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. 이전 1 2 3 4 5 6 다음 728x90 반응형
