js41 이펙트 응용편 - 서치 칠번째 검색 이펙트 이번 이펙트는 타이머을 추가하여 문제를 맞추는것입니다.. JS코드 정답을 체크하는 함수입니다. input박스에 값을 넣으면 자동으로 체크하여 보여줍니다. 코드 보기 let timeReamining = 120, //남은 시간 score = 0, //점수 timeInterval = "", answers = {}; //새로운 정답 function checkInput() { let input = event.currentTarget.value.trim().toLocaleLowerCase(); if (answers.hasOwnProperty(input) && !answers[input]) { answers[input] = true; //정답 표시하기 searchAnswers.style.display =.. 2022. 10. 21. 이펙트 용용편 - 서치 육번째 검색 이펙트 이번 이펙트는 정렬하는 기능을 구현했습니다. 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. 이펙트 응용편 - 페럴럭스 오번째 페럴럭스 이펙트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. 사이트유형 - 완성본 사이트 유형 완성본 원본 소스 보기 원본 사이트 보기 이번 사이트 유형은 css를 따로 나누어서 썻습니다. 따라서 소스보기를 통해 보시면 감사합니다. 사이트 유형 반응형 목업 원본 소스 보기 원본 사이트 보기 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. 애니메이션 - Animation Steps | 움직이는 이미지 CSS Animation Steps gif 파일의 프레임을 풀어서 하나의 이미지로 만든후 값을 지정하여 움직이는 애니메이션 효과를 만들었습니다. See the Pen stepAni by hmm365 (@hmm365) on CodePen. html step 클래스는 이미지를 넣을 stepbox 가 넘치지 않도록 영역을 잡아준후 stepbox 에 이미지를 넣습니다. 코드 보기 Start Stop css stepbox 에 해당하는 이미지크기를 원하는대로 조정한후 background 를 이용하여 프레임을 해체한 이미지를 불러옵니다. 여기서 중요한점은 크기를 조정한 결과에 따라 이미지 속도라 달라진다는것을 확인할수있습니다. 따라서 저는 원본이미지크기가 1600 / 1200 사이즈이므로 3배를 줄여 animatio.. 2022. 9. 7. 이전 1 2 3 4 5 ··· 7 다음 728x90 반응형
