프로그래밍184 이펙트 응용편 - 서치 이펙트 네번째 검색 이펙트 이번 이펙트는 각 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. css애니메이션 - 다보고있다~ 애니메이션 : 다보고있다~ See the Pen cssani8 by hmm365 (@hmm365) on CodePen. css 코드보기 *{ margin: 0; padding: 0; box-sizing: border-box; } html, body{ height: 100%; overflow: hidden; } .wrapper{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-style: preserve-3d; perspective: 600px; } .me{ position: absolute; width: 369px; height: 547px; tran.. 2022. 9. 27. css애니메이션 - 로딩중~ 애니메이션 : 로딩중~ See the Pen anicss7 by hmm365 (@hmm365) on CodePen. css 코드보기 body { background-color: rgb(14,43,122); } .loader { position: absolute; top: 50%; left: 50%; transform : translate(-50%,-50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform : translate(-50%,-50%); height: 100%; animation: spin 1s infi.. 2022. 9. 27. css애니메이션 - 움직이는 박스 div class="document"> See the Pen cssani6 by hmm365 (@hmm365) on CodePen. 애니메이션 : 움직이는 박스 body { background-color: #666; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); animation: rotate 8000ms linear .. 2022. 9. 27. css애니메이션 - 통통튀는 글자 애니메이션 : 통통튀는 글자 See the Pen cssani5 by hmm365 (@hmm365) on CodePen. html,body{ width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, purple 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: axis-pan; font-size: 80px; color: #fff; position: relative; top: 20px; display: inline-block; -webkit-font-smoothing: anti.. 2022. 9. 27. 이전 1 ··· 5 6 7 8 9 10 11 ··· 31 다음 728x90 반응형
