HTML5动画 - 滚动到时播放

Question

我希望在一个页面上有一些HTML5动画，但不希望它们一次播放/在页面加载时播放。相反，当用户滚动到每个动画所在的部分时，我希望每个动画都能自动播放。实现这一目标的适当标签，代码等是什么？

其他地方的几个例子： nest.com/living-with-nest/ - 当您向下滚动到第2天时，蓝色和橙色箭头会在

中生成动画

apple.com/ipad/features/ - 向下滚动到摄像机部分时，将播放镜头视频/ vr - 与Smart Cover，Airplay和其他部分相同

谢谢！

Answer 1

您问题的不同部分：

• 拥有html5动画：使用video元素

• 不立即启动动画：只需不指定autoplay

• 启动视频：

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

• 检查一个元素是否可见：使用jquery你可以简单地使用offset（）。top，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/

Answer 2

注意：此答案特定于您在评论中提到的Animate CC（Flash）生成的HTML5项目

现在有一种快速简便的方法可以使用Animate CC＆amp; amp;缪斯2017年。

1. 将您的动画导出为OAM文件或将动画上传到CC库，。
2. 在Muse中打开您的网站。
3. 导入OAM文件或使用Muse中CC库中的动画。把它放在适当的位置。

4. 在Muse中打开滚动效果面板 - ＆gt;转到动画标签 - ＆gt;选择动画复选框并选择自动播放。

   

5. 在浏览器中预览网页，只有当您向下滚动并且画布进入视图时，它才能播放。