스크롤시 애니메이션 재생

Question

HTML5의 각 스크롤로 움직이는 애니메이션을 제작하려고합니다. 이 웹 사이트의 내용은 http://www.puma.com/mobium/입니다. 스크롤에서만 움직입니다.

많은 것을 읽은 후에, 나는 스크롤에서 .gif 재생이 될 수 있다고 생각했습니다. 그래서 프레임을 제어 할 수 있도록 캔버스에 프레임별로 gif 프레임을 만들었습니다. 그러나 이제 창이 열리면 자동으로 재생됩니다. 내가 한 연구에 따르면, 그들은 주로 스크롤 할 때 .gif를 재생하는 것에 관한 것입니다. 내가 찾고있는 게 아니야.

각 스크롤에서 프레임 단위로 재생할 수 있습니까?

저는 html5 및 모든 시차 정보를 탐색하는 초보자이므로 사용 가능한 다른 방법을 자유롭게 제안 할 수 있습니다.

Answer 1

대부분의 애니메이션은 TweenLite js라는 JavaScript 라이브러리에서 처리되는 것처럼 보입니다. 플래시에서는 트윈처럼 작동합니다. TweenLite는 기본적으로 other.Scrolling 하나는 jQuery에 마우스 휠 플러그인

Jquery mouse wheel

TweenLite Js

에 의해 캡처에서 개체를 이동 퓨마 mobium 당신이 볼 수있는 애니메이션의 많은 스프라이트 이미지에서입니다 .

Camera Guy

Girl

Backgrouds와 :

http://www.puma.com/mobium/images/scene/1024/Background_01.jpghttp://www.puma.com/mobium/images/scene/1024/Background_02.jpghttp://www.puma.com/mobium/images/scene/1024/Background_04.jpghttp://www.puma.com/mobium/images/scene/1024/Background_05.jpg

이 녀석을 실행 :

http://www.puma.com/mobium/images/scene/1024/runner_1_m.png http://www.puma.com/mobium/images/scene/1024/runner_2_m.png 당신이 그들의 대부분은 애니메이션의 CSS 속성을 제어하기위한 TweenLite에서 CSSPLugin도있다 스프라이트 있습니다 볼 수 있듯이 contuously

재생

Audio

http://www.puma.com/mobium/images/scene/1024/runner_0_m.png .

그래서 마우스를 스크롤하면 스프라이트의 이미지 위치가 이동하고 눈 모양의 애니메이션처럼 보입니다. 이미지의 위치는 CSSplugin에 의해 배경 위치 속성에 의해 변경되고 mosuewheel jquery js는 마우스에 사용됩니다 스크롤.

이동 스크롤 외에도. 애니메이션은 왼쪽 및 오른쪽 화살표로 제어됩니다. 위의 링크

https://greensock.com/get-started-js

명확 기초가 TweenLite JS를 시작하는 설명합니다.

Chrome 개발자 도구의 네트워크 탭에서 스프라이트 이미지를 찾을 수 있습니다. 정보가 도움이되기를 바랍니다.