[JavaScript] 자바스크립트 requestAnimationFrame 사용하기 (HTML)

183_자바스크립트 requestAnimationFrame 사용하기 (HTML) [적용] 마우스 커서를 따라다니는 애니메이션을 생성하고 싶을 때 [내용] requestAnimationFrame()은 애니메이션의 모션을 세세하게 조절할 수 있다는 장점을 가졌다. HTML요소에 애니메이션 효과를 주기 위해서는 style 속성값을 조절한다. 앞서 사용한 tick 함수를 다시 사용하여 확인해 보자. https://stonefree.tistory.com/369 [JavaScript] 자바스크립트 requestAnimationFrame 사용하기 182_자바스크립트 requestAnimationFrame 사용하기 [적용] WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때 요소에 3D 효과를 주고 싶을 때..

2022.07.22

[JavaScript] 자바스크립트 requestAnimationFrame 사용하기

182_자바스크립트 requestAnimationFrame 사용하기 [적용] WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때 요소에 3D 효과를 주고 싶을 때 [문법] 메소드 의미 반환 requestAnimationsFrame(함수) 시간 경과에 따른실행 함수 등록 숫자 [내용] requestAnimationFrame()은 화면에 각 프레임이 표시되기 전에 함수를 불러내는 명령으로, 이 메소드를 사용하면 시간 경과에 따른 지속적인 변화를 줄 수 있다. 일반적인 디스플레이는 초당 60프레임이 표시되며, 이는 한 프레임단 약 16밀리초의 시간이다. 만약 setTimeout()과 setInterval()을 사용해 16밀리초 이하의 시간을 설정한다면, 화면에는 표시되지 않으므로 불필요한 처리가 발..

2022.07.19

[JavaScript] 자바스크립트 요소 채도 조절하기

181_자바스크립트 요소 채도 조절하기 [적용] 요소에 모노크롬 효과를 주고 싶을 때 [내용] 채도의 조절은 CSS의 filter 속성에 grayscale() 메소드를 사용한다. 기본 상태는 grayscale(0%)이며, 인수의 값이 100%이며 모노크롬 효과를 낸다. CSS Transitions와 Web Animations API 두 가지의 예시를 확인해 보자. CSS Transitions를 사용한 샘플 CSS style.css .rect { ...생략... filter: graysclae(0%); transition: all 0.5s; } .rect.state-show { filter: grayscale(100%); } JavaScript (부분) main.js const element = docum..

2022.07.19

[JavaScript] 자바스크립트 요소 밝기 조절하기

180_자바스크립트 요소 밝기 조절하기 [적용] 발기를 조절하여 요소를 눈에 띄게 만들고 싶을 때 포커스 상태 효과를 주고 싶을 때 [내용] 밝기 조절은 CSS의 filter 속성에 brightness() 메소드를 사용하며, brightness(100%)가 기본 상태다. 인수가 100%보다 크면 밝아지고 작으면 어두워진다. CSS Transitions와 Web Animations API 예시를 확인해 보자. CSS Transitions를 사용한 샘플 CSS style.css .rect { ...생략... filter: brightness(100%); transition: all 0.5s; } .rect.state-show { filter: brightness(300%); } JavaScript (부분) ..

2022.07.19

[JavaScript] 자바스크립트 요소 투명도 조절하기

179_자바스크립트 요소 투명도 조절하기 [적용] 비표시 상태가 되는 요소 효과를 주고 싶을 때 [내용] CSS의 opacity 속성을 사용해 요소의 불투명도를 조절한다. opacity가 1일 때는 완전 불투명 상태이며, 0일 때는 완전 투명 상태, 0.5는 반투명 상태다. CSS Transitions와 Web Animations API의 예시를 확인해 보자. CSS Transitions를 사용한 샘플 CSS style.css .rect { width: 200px; height: 200px; display: block; position: absolute; background: white; top: 100px; transition: all 0.5s; } .rect.state-show { opacity: 0..

2022.07.19

[JavaScript] 자바스크립트 요소 이동하기

178_자바스크립트 요소 이동하기 [적용] 요소의 이동 모션으로 주의를 환기하고 싶을 때 [내용] 좌표의 변경은 CSS transform 속성에 translate() 메소드를 사용한다. translate()를 사용해 요소의 수직과 수평 이동이 가능하다. CSS transitions와 Web Animations API의 예시를 확인해 보자. CSS Transitions를 사용한 샘플 CSS (부분) style.css .rect { width: 100px; height: 100px; display: block; position: absolute; background: white; top: 150px; transition: all 3s; } .rect.state-show { transform: translat..

2022.07.19

[JavaScript] 자바스크립트 요소 크기 변경하기

177_자바스크립트 요소 크기 변경하기 [적용] 버튼에 마우스 반응을 설정하고 싶을 때 특정 요소에 눈에 띄는 효과를 주고 싶을 때 [내용] 요소의 크기 변경은 CSS의 transform 속성과 scale() 메소드를 사용한다. sclae()의 인수가 1이면 원래 상태의 크기를 나타내며, 인수가 1보다 크면 확대, 작으면 축소한다. 예를 들면 2는 두 배의 비율, 0.5는 절반의 비율을 나타낸다. CSS Transitions와 Web Animations API의 예시를 확인해 보자. CSS Transitions를 사용한 샘플 CSS (부분) style.css .rect { ...생략... transition: all 0.5s; } .rect.state-show { transform: sclae(4); }..

2022.07.19

[JavaScript] 자바스크립트 Web Animations API 사용하기

176_자바스크립트 Web Animations API 사용하기 [적용] 자유도가 높은 모션을 생성하고 싶을 때 자바스크립트를 메인으로 모션을 생성하고 싶을 때 [문법] 메소드 의미 반환 요소.animate(객체, 객체) 애니메이션 처리 없음 [내용] Web Animations API* 는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다. CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 한다. 하지만 Web Animations API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있다. 첫 번째 인수는 시작과 종료 값을 포함하는 객체, 두 번째 인수는 애니메이션 속성을 포함하는 객체를 지정한다. *Web Animations ..

2022.07.18

[JavaScript] 자바스크립트 CSS Animations 종료시 작업 처리하기

175_자바스크립트 CSS Animations 종료시 작업 처리하기 [적용] 모션 실행 후 처리를 추가하고 싶을 때 [문법] 이벤트 의미 animationstart 애니메이션 시작 시 이벤트 animationiteration 애니메이션 반복 발생 시 이벤트 animationend 애니메이션 종료 시 이벤트 [내용] 요소의 다음 이벤트를 감시하면 애니메이션 종료를 확인할 수 있다. animationstart, animationiteration, animationend 이벤트는 CSS Animations 을 감시하며, 해당 이벤트가 완료되면 animationstart 이벤트가 발생한다. CSS style.css .rect { ...생략... width: 100px; height: 100px; backgrou..

2022.07.18

[JavaScript] 자바스크립트 CSS Transitions 종료시 작업 처리하기

174_자바스크립트 CSS Transitions 종료시 작업 처리하기 [적용] 모션 실행 후 처리를 추가하고 싶을 때 [문법] 이벤트 의미 transitionend transition 완료 시 이벤트 [내용] 요소의 다음 이벤트를 감시하면 애니메이션 종료를 확인할 수 있다. transitionend 이벤트는 CSS Transitions 를 감시하며, 해당 이벤트가 완료되면 transitionend 이벤트가 발생한다. CSS style.css .rect { ...생략... width: 100px; transition: all 2s; } .rect.state-show { width: 400px; } JavaScript main.js const element = document.querySelect('.rec..

2022.07.18