전체 글
-
마우스, 기기 모션으로 360˚ 회전CODE/Javascript 2021. 6. 30. 10:29
var target = document.querySelector("#media-progress-icon"); // 대상의 중심점 구하기 var center = { x: target.getBoundingClientRect().left + (target.clientWidth / 2), y: target.getBoundingClientRect().top + (target.clientHeight / 2) } window.addEventListener('resize', function () { center = { x: target.getBoundingClientRect().left + (target.clientWidth / 2), y: target.getBoundingClientRect().top + (targe..
-
애니메이션 코드를 효율적으로 작성하기 위한 팁 | CSS-TRICKSInteractive/GSAP 2021. 5. 6. 18:11
애니메이션 라이브러리 사용 일부 개발자는 CSS 전환, CSS 애니메이션 또는 웹 애니메이션 API( WAAPI ) 와 같은 기본 브라우저 기술을 사용하여 라이브러리를 로드하지 않고도 동일한 작업을 수행 할 수 있기 때문에 애니메이션 라이브러리를 사용하는 것이 낭비라고 생각합니다. 어떤 경우에는 사실입니다. 그러나 고려해야 할 몇 가지 다른 요소는 다음과 같습니다. 브라우저 버그, 불일치 및 호환성 : GSAP와 같은 애니메이션 라이브러리는 이러한 문제를 해결하고 보편적으로 호환됩니다. IE9에서 모션 경로를 사용할 수도 있습니다! SVG 요소의 transform-origin 처리, 경로 스트로크 측정, Safari의 3D origin 등, 크로스 브라우저 문제와 관련하여 많은 문제가 있는 영역이 있습니..
-
스크롤 트리거 - 플러그인 | GSAPInteractive/GSAP 2021. 4. 5. 18:06
ScrollTrigger는 최소한의 코드로 놀라운 스크롤 기반 애니메이션을 만듭니다 . 또는 애니메이션과 무관하더라도 스크롤과 관련된 모든 것을 트리거합니다. 가장 일반적인 ScrollTrigger 실수에 대해서도 학습하여 게임에서 앞서 나가세요. 주요 기능 특정 요소에 애니메이션을 연결하여 해당 요소가 뷰포트에 있을 때만 재생되도롭 합니다. 이렇게 하면 성능이 향상되고 아름다운 애니메이션을 실제로 볼 수 있습니다. ScrollTrigger는 정의된 영역에 들어가거나 나갈 때 애니메이션에 대한 작업(재생, 일시 중지, 다시 시작, 되감기, 완료, 재설정)을 수행하거나 스크러버(scrub: true)처럼 작동하도록 스크롤바에 직접 연결할 수 있습니다. 애니메이션과 스크롤바 사이의 연결을 부드럽게하여 "추적..
-
가장 일반적인 GSAP 실수 - 학습센터 | GSAPInteractive/GSAP 2021. 4. 2. 15:30
from () 논리 문제 만들기 일반적으로 .fromTo() 대신 .to() 및 .from() 트윈을 사용하는 것이 현명합니다. 왜냐하면 더 동적이기 때문입니다. 트윈이 처음으로 렌더링할 때 현재 발생하는 모든 것에서 시작 또는 종료 값을 가져옵니다. 효율적인 애니메이션을 만드는 것에 대한 기사 중 하나입니다. 그러나 이러한 동적 특성은 몇 가지 시나리오에서 현명하지 않을 수 있습니다. 먼저, .from() 트윈은 제공된 값에서 현재 값으로 이동합니다. 아래 예를 살펴보세요. document.querySelector("button").addEventListener("click", () => gsap.from(".box", {opacity: 0, duration: 3}) ); 한 번 클릭하여 재생 해보세요..
-
Debounce & Throttle | kellis님Javascript/프로그래밍 기법 2021. 4. 1. 11:30
[출처 : kellis.tistory.com] 디바운스(Debounce)와 스로틀(Throttle)은 이벤트를 제어하는 방법으로, 과도한 이벤트의 발생이 성능 저하를 초래하지 않도록 하기 위해 사용합니다. 대표적으로 디바운스와 스로틀을 이용하여 이벤트 발생을 제어하는 기능은 아래와 같습니다. 스크롤 휠을 이용한 지도 확대/축소 검색어 입력시 자동완성 혹은 연관검색어 노출 피드 방식의 데이터 노출 (스크롤링을 통한 데이터 노출) 이벤트 오버클럭(Overclock - 과도한 이벤트 발생)은 리소스 사용량을 과도하게 증가시키기 때문에 성능 문제를 야기하고 사용자 경험을 떨어뜨립니다. 특히 스크롤 이벤트의 경우 이벤트 오버클럭을 발생시키기 쉬운데, 이는 사용자가 스크롤을 빨리 내리면 3초의 간격 내에 몇 천 번..
-
GSAP 시작하기 - 학습센터 | GSAPInteractive/GSAP 2021. 3. 29. 11:36
GreenSock Animation Platform(GSAP)은 JavaScript가 만질 수 있는 모든 것(CSS 속성, SVG, React, 캔버스, 일반 객체 등)을 애니메이션화하고 수많은 브라우저 불일치를 해결하며, 이 모든 것을 놀라운 속도(jQuery보다 최대 20배 빠른 속도)로 해결한다. GSAP가 1,000,000개의 사이트와 많은 주요 브랜드에서 사용되는 이유를 확인하세요. 학습 곡선를 따라 가면 코드로 애니메이션을 만드는 것이 얼마나 재미있을 수 있는지 알게 될 것입니다. 시간을 낼 만한 가치가 있다고 약속합니다. GSAP는 속성 조작자애니메이션은 궁극적으로 초당 여러 번 속성 값을 변경함으로써 어떤 것이 움직이고, 희미해지고, 회전하는 것처럼 보이게 합니다. GSAP는 시작 값, ..
-
1-7. 도형 합성 - Canvas API | MDNDOM/Canvas 2021. 3. 23. 16:26
이전의 모든 예제에서 도형은 항상 다른 것 위에 그려졌습니다. 대부분의 상황에 적합하지만 도형이 합성되는 순서를 제한합니다. globalCompositeOperation 속성을 설정하여 이러한 동작을 변경할 수 있습니다. 또한 clip 속성을 사용하면 원하지 않는 모양 부분을 숨길 수 있습니다. globalCompositeOperation 기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 특정 영역을 가리고 캔버스의 특정 부분을 지우는 데 사용할 수 있습니다. (clearRect() 메소드처럼 직사각형에 국한되지 않음) globalCompositeOperation = type 새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다...
-
P5.js 기초 강의 | 생활코딩Interactive/P5.js 2021. 3. 18. 18:20
시작하기 function setup() { ... } : 최초로 한번만 실행되는 코드 (초기화) function draw() { ... } : 애니메이션과 같이 반복적으로 실행되어야 하는 코드 createCanvas() : 캔버스 영역 설정 random() : 홈페이지 참고 mouseX, mouseY : 현재 마우스 포인터의 X, Y값 pmouseX, pmouseY : 이전 마우스 포인터의 X, Y값 windowWidth, windowHeight : 윈도우의 width, height 값 ※ 피타고라스의 정리 pow(n1, n2) : n1의 n2 제곱 *ex) pow(3,3) = 3x3x3 sqrt(n) : n의 제곱근 삼각함수 cos 동경의 x 좌표 sin 동경의 y 좌표 ※ 라디안이 커질 때(양수) 동..