HTML5 애니메이션 - 스크롤 할 때

한 페이지에 HTML5 애니메이션을 몇 개 갖고 싶지만 한 번에/페이지가로드 될 때 모두 재생하지 못하게하고 싶습니다. 대신 사용자가 각 애니메이션이있는 섹션으로 스크롤 할 때 각 애니메이션이 자동 재생되도록하고 싶습니다. 그 일을 가능케하는 적절한 태그, 코드 등은 무엇입니까?HTML5 애니메이션 - 스크롤 할 때

다른 예를 몇 : nest.com/living-with-nest/ - 당신이 하루에 2 아래로 스크롤 할 때 파란색과 주황색 화살표가

apple.com/ipad/features/ 을에 애니메이션 - 카메라 섹션까지 아래로 스크롤하면 렌즈 비디오/VR이 재생됩니다. - 스마트 커버, Airplay 및 기타 섹션과 동일합니다.

고마워요! 귀하의 질문에

출처

2012-05-01 Chet Loesing

연구를 수행 했습니까? – Ozzy

나는 연구를 해왔다. 아마도이 시점에서 2 시간이 넘었을 것입니다. –

질문이 구체적이지 않습니다. 당신은 아주 광범위한 질문을하고 있습니다. 왜 당신이 아무런 노력도하지 않은 것처럼 들리는 이유입니다. Google HTML5 애니메이션을 사용하면 많은 캔버스 자습서와 jQuery/자바 스크립트 애니메이션 예제가 만들어집니다. 내가 그 중 하나를 복사하고 그것을 구축하고 붙어 있다면, 왜 '이 작동하지 않는 이유'또는 매우 구체적인 다른 질문을 작성하고 내가 작성한 코드를 보여 사람들이 대답하고 도움이 될 가능성이 더 높습니다 나를. – Ozzy

다른 부분 :

는 HTML5 애니메이션 유무 :
즉시 애니메이션을 시작하지 video 요소를 사용 : 단순히 autoplay

을 지정하지 않은 비디오를 시작

document.getElementById('myVideo').play();

검사 요소가 표시되는 경우 : jQuery를 사용 님 단순히 오프셋 사용할 수() 상단 window.innerHeight 및 scrollTop을 :.

var visible = 
    $(window).scrollTop()+window.innerHeight>$e.offset().top 
    &&$(window).scrollTop()<$e.offset().top+$e.height(); // $e is the video element

스크롤 : 탐지 사용 JQuery와 scroll 함수

을 나는 스크롤이 요소를 드러내거나 숨길 때 어떻게 감지 할 수 있는지 설명하기 위해 바이올린을 만들었습니다. http://jsfiddle.net/dystroy/zj5Sz/

출처

2012-05-02 10:36:02

참고 :이 답변은 Animate CC (Flash) 테드 HTML5 프로젝트는 당신은 코멘트

2017

수출 애니메이션 OAM 파일로 애니메이션 CC & 뮤즈를 사용하거나 애니메이션을 업로드하는 등의 설정을 제어하는 빠르고 쉬운 방법은 지금이에 언급 한 바와 같이 CC 라이브러리에.
Muse에서 웹 사이트를 엽니 다.
OAM 파일을 가져 오거나 Muse의 CC 라이브러리에서 애니메이션을 사용하십시오. 적절한 위치에 놓습니다.
Muse에서 열린 스크롤 효과 패널 -> 애니메이션 탭 -> 애니메이션 확인란을 선택하고 자동 실행을 선택합니다. 당신이 아래로 스크롤하여 캔버스보기에 올 때
미리보기 브라우저에서 웹 페이지와 만 재생합니다.

출처

2016-11-23 11:53:15 thirstyClouds

HTML5 애니메이션 - 스크롤 할 때

답변

관련 문제