JavaScript/Effect34 이펙트 응용편 - 페럴럭스 칠번째 페럴럭스 이펙트u 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. js 코드 설명 1. .content__item__desc에 reveal이 붙었을때의 상태만을 다중으로 선택 후 해당 요소를 forEach를 통해 추출합니다. 2. 각 꺼낸 요소를 .innerText로 문자열로 변환 후 splitText라는 변수안에 넣고 3. "" + splitWrap + "";를 통해 splitText 양쪽에 span 태그를 열고 닫는 태그를 넣어줍니다. 5. splitText을 각 뽑아낸 요소에 innerHTML로 넣습니다~ //스크롤시 딜레이를 걸어 show를 붙여주는 원리 0. revealDelay 에는 el.dataset... 2022. 10. 21. 이펙트 응용편 - 게임 첫번재 게임이펙트 코드보세요. 원본 소스 보기 원본 사이트 보기 2022. 10. 21. 이펙트 응용편 - 슬라이더 칠번째 이미지 버튼클릭으로 움직이기 버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이. JS 설명 그동안 배웠던 슬라이더 이펙트를 최대한 활용한것입니다. 따로 설명은 없습니다. 코드 보기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //보여지는영역 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //각각 이미지 const sliderDot = document.qu.. 2022. 10. 21. 이펙트 응용편 - 슬라이더 육번째 이미지 버튼클릭으로 움직이기 이번 슬라이더 이펙트는 버튼, 닷메뉴 및 무한이동 이됩니다. JS 설명 checkIndex() 함수는 sliderInner주었던 transition을 지우고 첫번째 와 마지막 이미지로 돌려보냅니다. 코드 보기 //순간이동 슬라이드 function checkIndex() { sliderInner.classList.remove("transition"); if (currentIndex == sliderLength) { sliderInner.style.left = -(1 * sliderWidth) + "px"; currentIndex = 0; } if (currentIndex == -1) { sliderInner.style.left = -(sliderLength * sliderWid.. 2022. 10. 21. 이펙트 응용편 - 슬라이더 오번째 이미지 버튼클릭으로 움직이기 이번 슬라이더 이펙트는 버튼, 닷메뉴 가있습니다. JS 설명 닷버튼을 클릭했을때 닷의 인덱스 값을 gotoSlider에 보내주어서 합니다. 코드 보기 //닷버튼 클릭했을때 document.querySelectorAll(".slider__dot .dot").forEach((e, i) => { e.addEventListener("click", () => { gotoSlider(i); }); }); 원본 소스 보기 원본 사이트 보기 2022. 10. 21. 이펙트 응용편 - 서치 칠번째 검색 이펙트 이번 이펙트는 타이머을 추가하여 문제를 맞추는것입니다.. 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. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
