HTML 자세히 보기 CSS 자세히 보기 JAVASCRIPT 자세히 보기 광고 준비 중 JS이펙트26 [이펙트] 마우스06 텍스트 효과 2022. 10. 3. [이펙트] 페럴랙스06 텍스트 효과 2022. 10. 3. [이펙트] 서치05 filter() 2022. 10. 3. [이펙트] 마우스05 기울기 / 반전 효과 2022. 9. 28. [이펙트] 서치04 find() 2022. 9. 28. [이펙트] 마우스 03 조명 효과 마우스 조명효과는 마우스 커서가 위치한 범위가 돋보기로 비추듯이 환하게 보이는 것 처럼 보이는 효과 입니다. const cursor = document.querySelector(".mouse__cursor"); const circle = cursor.getBoundingClientRect(); console.log(circle); Element.getBoundingClientRect() 메서드를 사용하여 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환하였습니다. 반환 값은 padding과 border-width를 포함해 전체 엘리먼트가 들어 있는 가장 작은 사각형인 DOMRect 객체입니다. left, top, right, bottom, x, y, width, heig.. 2022. 9. 22. [이펙트] 페럴랙스 효과 05 2022. 9. 21. [이펙트] 슬라이드 효과 04 이미지 슬라이드(버튼) 2022. 9. 19. [이펙트] 마우스 효과 02 마우스 따라다니기(GSAP) 2022. 9. 19. [이펙트] 패럴랙스 효과 04 2022. 9. 19. [이펙트] 패럴랙스 효과 03 2022. 9. 13. [이펙트] 패럴랙스 효과 02 2022. 9. 13. [이펙트] 패럴랙스 효과 01 패럴랙스 이펙트 01 패럴랙스 01 스크롤 효과입니다. 9장의 이미지가 스크롤 되어 보여집니다. 스크롤로 해당 영역에 들어가면 메뉴 버튼에 엑티브 효과가 생깁니다. 메뉴 버튼을 눌러 해당 영역으로 직접 이동할 수도 있습니다. 하단 소스 보기로 코드를 확인할 수 있습니다. 원본 사이트 보기 2022. 9. 6. [이펙트] 마우스 효과 01 마우스 따라가기 2022. 9. 6. [이펙트] 슬라이드 03 슬라이드 이펙트 03 슬라이드 03 트랜지션 효과 입니다. 5장의 이미지가 좌측 방향으로 흘러갑니다. 마지막 사진에서 되돌아가지 않고 계속 흘러가는 것처럼 보입니다. 하단 소스 보기로 코드를 확인할 수 있습니다. 원본 사이트 보기 스크립트 2022. 9. 2. 슬라이드 이펙트 02 이미지 좌측으로 흘러가기 슬라이더 이펙트 02 슬라이더 이펙트 사진 흘러가기 입니다. 5장의 이미지가 좌측 방향으로 흘러갑니다. 하단 소스보기를 통해 GSAP, jQuery 로 구현한 코드를 볼 수 있습니다. 원본 사이트 보기 스크립트 2022. 8. 30. 슬라이드 이펙트 01 트랜지션 효과 슬라이더 이펙트 01 슬라이더 이펙트 트랜지션 효과 입니다. 5장의 이미지가 순차적으로 반복됩니다. 하단 소스보기를 눌러 코드를 볼 수 있습니다. 원본 사이트 보기 스크립트 2022. 8. 30. 퀴즈 이펙트 06 슬라이드 유형 웹디자인 기능사 기출문제 풀어보기 퀴즈 웹 디자인 기능사 필기 기출문제 풀이 퀴즈 슬라이드 유형 입니다. 다음 문제 보기와 문항수 맞춘문제 개수를 추가하였습니다. 원본 사이트 보기 스크립트 //문제정보 const quizInfo = [ { answerType: "웹디자인기능사 필기 기출문제 (2011.10.9)", answerNum: 1, answerAsk: "눈이 부시지 않고 조도가 균일하며, 그림자가 없는 부드러운 침실이나 병실 등 휴식공간에 사용되는 조명방법은?", answerChoice: [ "전반확산조명", "간접조명", "직접조명", "반간접조명" ], answerResult: "간접조명", answerEx: "간접조명 - 광원에서 나온 빛을 천장이나 벽에 부딪혀 확산된 반사광으로 비추는 조명 방식. 효율은 떨어지지만 그늘짐이.. 2022. 8. 24. 퀴즈 이펙트 05 객관식 60문제 유형 웹디자인 기능사 기출문제 풀어보기 퀴즈 웹 디자인 기능사 필기 기출문제 풀이 퀴즈 객관식 60문제 유형 입니다. 문항수와 맞힌 문제 개수로 합불여부 가리기를 추가 했습니다. 원본 사이트 보기 스크립트 2022. 8. 24. 서치 이펙트 03 charAt() 서치 이펙트3 charAt()를 이용하여 태그 알파벳 검색기를 만들었습니다. 클릭한 알파벳과 첫글자가 일치하는 태그를 보여줍니다. 스크립트 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); //알파벳 const searchList = document.querySelectorAll(".search__list ul li") //목록 리스트 const searchInfo = document.querySelector(".search__info .num") //전체 갯수 //전체 개수 구하기 searchInfo.textContent = searchList.length; searchKeyword.forEach(el => {.. 2022. 8. 22. 이전 1 2 다음 728x90 반응형
