html - 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
  

• 检测滚动：使用jqueryscroll函数

我做了一个小提琴来说明如何检测滚动何时显示或隐藏元素：http: //jsfiddle.net/dystroy/zj5Sz/

Answer 2

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

现在有一种使用 Animate CC & Muse 2017 控制此类设置的快速简便的方法。

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

4. 在 Muse 中打开滚动效果面板 -> 转到动画选项卡 -> 选择动画复选框并选择自动播放。

   

5. 在浏览器中预览网页，它应该仅在您向下滚动并显示画布时播放。