javascript3 [JavaScript] 스크롤 애니메이션 (Apple 제품 페이지) 1. html- canvas 태그 생성 2. css - 스크롤시 호출되는 이미지는 화면의 중앙에 위치 해야하므로 fixed사용body{ width: 100vw; height: 500vh; background-color: #000;}canvas{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 50vw; max-height: 50vh;} 3. javascript_1const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); .. 2024. 6. 13. [JavaScript] 웹페이지 scroll이벤트 -상단에 네비를 클릭하면 매칭되는 컨텐츠 페이지 이동-스크롤시 컨텐츠와 매칭되는 네비에 이벤트 ***html 1 2 3 4 1 2 3 4 const $link = [...document.querySelectorAll('a')];const $scroll = document.querySelector('.scroll-container');const $page = [...$scroll.querySelectorAll('.scroll-page')];$link.forEach((_,i) => { _.addEventListener('click', (e) => { //$link(상단의 숫자)를 클릭시 이벤트 실행 e.preventDefaul.. 2024. 4. 25. 제이쿼리 연동 www.jquery.com/ 다운로드를 누르고 맨아래 jQuery CDN를 클릭한다. 찾고자하는 버젼이 없을 경우 찾고자하는 버젼이 있을 경우 앞에 보이는 버젼중 원하는 버젼을 클릭한다. jQuery 3.x 최신버젼 jQuery 2.x jQuery 1.x 낮은버젼 최신버젼일 수록 오래된브라우져는 실행되지않는다. 공공기관이나 여러곳에서 구버젼을 이용하는 곳이 많기에 낮은버젼을 이용하는 것이 좋다. (가장 안정적인 버전은 jquery-1.12.4 이라고 한다.) 1.제이쿼리 사용하는 방법 uncompressed를 클릭하면 창이 뜨고 복사해서 html에 붙여 넣을 수 있다. (인터넷으로 제이쿼리를 가져오는 경로임) 사이트가 가볍다. 폰트가 제일 위 (폰트를 html로 연동할 경우) 다음 css 제이쿼리 붙여넣.. 2020. 5. 11. 이전 1 다음
