HTML5動畫 - 播放時滾動到

我想在一個頁面上有幾個HTML5動畫，但不希望它們全部一次播放/頁面加載時。相反，我希望每個動畫在用戶滾動到每個動畫所在的部分時自動播放。什麼是適當的標籤，代碼等來實現這一點？HTML5動畫 - 播放時滾動到

幾個例子別處： nest.com/living-with-nest/ - 當你向下滾動至2天藍色和橙色箭頭動畫在

apple.com/ipad/features/ - 當您向下滾動至相機部分時，鏡頭視頻/音頻會播放 - 與Smart Cover，Airplay和其他部分相同

謝謝！

2012-05-01 Chet Loesing

你有沒有做過任何調查？ – Ozzy

我已經完成了研究。可能在這一點上超過2小時。 –

你的問題根本不具體。你在問一個非常廣泛的問題，這就是爲什麼它聽起來像你沒有做出任何努力。如果我谷歌HTML5動畫，它會拿出大量的畫布教程和jQuery/JavaScript動畫的例子。如果我複製其中一個並加以構建並卡住，然後問一個問題'爲什麼這不工作'或別的，但非常具體，並顯示我寫的代碼，然後人們會更有可能回答和幫助我。 – 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項目，您在留言

現在有使用動畫CC &繆斯2017年

導出動畫爲OAM文件或上傳動畫控制這種設置的快速簡便的方法提到的到CC圖書館。
在Muse中打開您的網站。
導入OAM文件或使用Muse中的CC庫動畫。把它放在適當的位置。
在Muse中打開滾動效果面板 - >轉到動畫選項卡 - >選擇動畫複選框並選擇自動播放。當你向下滾動和帆布來考慮
瀏覽器預覽網頁，它應該只玩。

來源

2016-11-23 11:53:15 thirstyClouds

HTML5動畫 - 播放時滾動到

回答

相關問題