본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _

JavaScript &jQuery9

[JavaScript] Sprite Sheets 애니메이션 1. html- canvas 태그 생성   2. cssbody{ position: relative; height: 100vh;}canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color:rgb(248 224 217);} 3. javascript 1). 이미지 호출 - drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)매개변수(sx, sy)는 스프라이트 시트(소스)의 시작 위치,(dx, dy)는 캔버스(대상)의 시작 위치며 기본적으로 왼쪽 상단이 (0.. 2024. 6. 14.
[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.
[JavaScript] style.setProperty() ChatGPT에게 style.setProperty()에 대해 물어보았다. ChatGPT 'style.setProperty' 메소드는 JavaScript를 사용하여 HTML 요소의 스타일 속성을 동적으로 설정하거나 업데이트할 때 사용됩니다. 이 메소드는 CSS 스타일 속성의 이름과 값을 매개변수로 받아서 해당 요소의 스타일을 설정할 수 있게 해줍니다. 이 방법은 CSS 속성 이름을 문자열로 직접 지정하기 때문에 표준 CSS 속성 이름을 사용해야 하며, JavaScript에서 일반적으로 사용하는 camelCase 대신 CSS에서 사용하는 kebab-case를 사용해야 합니다. 사용 방법 'style.setProperty(propertyName, value, priority)' 메소드는 세 가지 매개변수를 받.. 2024. 4. 19.
[JavaScript] 세로 스크롤 위치 퍼센트에 따른 가로 스크롤 만들기 See the Pen Progress Indicator on Scroll by gaae (@gaae) on CodePen. 2024. 4. 19.
[JavaScript] 스크롤 위치 높이 1. scrollTop, scrollY, pageYOffset : 상단에서 수직으로 멀어진값 - Element 기준 const scrollTop = document.documentElement.scrollTop; //const scrollTop = document.querySelector("html").scrollTop; - Window 기준 const scrollY = window.scrollY; - Window 기준 : IE 호환 const pageYOffset = window.pageYOffset; 셋다 값은 동일. 2. clientHeight, innerHeight : margin, border제외 화면에 보이는 높이, 시각적으로 보이는 영역 스크린 창 - Element 기준 const clien.. 2024. 4. 19.

티스토리툴바