Question

我正在制作一个项目，我希望有一个视频动画，就像Apple在iPad Air页面上所做的那样。

访问apple.com/ipad-air，你会明白我的意思。 iPad会在网页上的每个“幻灯片”中移动。

我的问题是：你如何让这些动画起作用？我正在查看他们的代码，看到iPad只是一个很大的.mp4文件。它似乎停在某些关键帧上。是否有任何jquery库可以帮助我做到这一点？

另外，我希望能够支持旧浏览器。我如何检测浏览器并能够支持较旧的浏览器？

提前致谢！

Answer 1

使用onepage-scroll并通过callback functions设置CSS3效果。

其他信息：

Demo
OnePageScroll.js: Creating an Apple’s iPhone 5S Website

Answer 2

嗯，我可能在这里错了，但看起来动画最初一个mp4，但其余的都是通过CSS3动画在每一步的图像上完成的。如果你查看他们的代码，使用类似Chrome开发工具，你会发现他们有每个“子页面”的标签（如设计，性能，无线等）。例如，看看他们拥有的HTML：

<section class="scene active" id="design" data-track-visitor-engagement="design">
            <div class="scene-content">
                <img class="hero-img centered" src="http://images.apple.com/ipad-air/overview/images/desktop/design_hero_2x.jpg" width="498" height="640" alt="">
                <div class="container centered fade-slide">
                    <h1><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_title_2x.png" width="325" height="220" alt="All-new design. A ton of advanced technology. In just one pound."></h1>
                    <p class="intro">You have to hold iPad&nbsp;Air to believe it. It’s just 7.5 millimeters thin and weighs just one pound. The stunning Retina display sits inside thinner bezels, so all you see is your content. And an incredible amount of power lies inside the sleek enclosure. So you can do so much more. With so much&nbsp;less.</p>
                    <p class="intro"><a class="more" href="/ipad-air/design/" onclick="s_objectID=&quot;http://www.apple.com/ipad-air/design/_2&quot;;return this.s_oc?this.s_oc(e):true">Learn more about design</a></p>
                </div>
                <ul class="tiles centered fade-slide">
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_weight_2x.png" width="100" height="100" alt="1 pound"></li>
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_lighter_2x.png" width="100" height="100" alt="28% lighter"></li>
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_thinner_2x.png" width="100" height="100" alt="20% thinner"></li>
                </ul>
            </div>
        </section>

然后，你会在.fade-slide中看到他们的CSS中有-webkit-transition:。这就是在mp4文件之后动画这些图像的动画。 Take a look at CSS transitions here

另外，我确信他们对旧浏览器有一些javascript / jQuery故障保护（或者对于旧浏览器来说这是一个更简单的版本，虽然Apple已知是最前沿的，所以如果他们没有它，这不会让我感到惊讶）。

无论如何，这只是对他们如何做的高级解释:)。

Answer 3

根据网络上提供的各种文章，为了达到你提到的效果，Apple使用了HTML5画布，松散图像和javascript的组合。

他们还使用一种非常特殊的技术来动画一行JPG图像。

Apple没有使用视频，而是通过显示开始帧和结束帧将动画压缩成少量JPEG图像，然后使用特殊的JPEG（如本文顶部的特殊JPEG），而不是使用视频仅图像的更新和动画部分。 JSON文件用于指定更新位的定位方式，并且在一个小的Javascript中可以找到在元素中显示“视频”的实际逻辑。

（Source）

工具

有些应用程序试图模仿类似的结果，但从我所看到的，没有人可以提供Apple网站上显示的质量的任何东西。以防万一，这里有两个选择：

Sequence JS

Phosphor

一般性想法

请记住，苹果是一个具有残酷销售数字的顶级企业。他们有预算安排一支高端超级合格程序员和设计师团队，以保持他们的创新状态，甚至在网络上。

如果你想达到类似的效果，你应该从小步骤开始。

Answer 4

为了操纵<video>元素，我建议popcorn.js。它应该允许您双向绑定到视频中的位置。然后，您可以使用javascript或css3动画来控制页面上<video>和其他周围元素的位置。

为了使用滚动键来设置周围元素的动画，我建议（我最喜欢的lib的无耻插件）greensock。 Greensock将允许您将演示文稿中所有元素的动画设置为时间轴，然后可以暂停，撤消或搜索。

结合

是我所知道的最好和最灵活的方式来制作这类演示文稿。

这是一个基于greensock构建的滚动表示库的示例

http://johnpolacek.github.io/superscrollorama/

这是一个使用爆米花双向视频控制的例子

http://client.heliozilla.com/aer/demo_06.html

如何使用视频创建网络动画 - 例如apple.com/ipad-air

4 个答案: