Apple.com/iphone幻灯片:它是如何工作的?

时间:2011-10-06 00:58:49

标签: javascript html5 css3 webkit-transform

所以这更像是一个好奇的问题,而不是一个实际的问题所以请耐心等待。我刚检查出来:

http://www.apple.com/iphone/

封面幻灯片对我来说真的很令人印象深刻。我不想重现它,但我真的对它的工作原理感兴趣。 从我的检查来看,他们只是使用了一堆定时的webkit转换/转换,但我不知道到底发生了什么。

此外,是否有一种简单的方法可以在不对其进行硬编码的情况下创建此行为,因为这就是我现在要做的。

3 个答案:

答案 0 :(得分:3)

答案 1 :(得分:2)

我只是在回答我自己的问题,因为除了硬编码之外,没有人能真正给我答案。我认为Apple只是付出了很多努力。我仍然对css过渡的复杂使用印象深刻,尤其是当对象转换到下一帧时

答案 2 :(得分:-1)

这是带有源代码的a working demo

基本上这个想法是,

  • 预加载所有图片

  • 有一个计时器,每N秒触发一次

  • 当计时器触发时,启动一个转换动画,将新图像滑入。


关于这个想法的详细说明允许你停止/反向/暂停/恢复,在一个周期后自动停止,依此类推。


此效果的商品名为“slider”。所以你可以google滑块并找到很多讨论。有jquery(nivoslider)的滑块,有一个用于mootools(slideitmoo),有无框架选项(比如我链接的脚本演示),等等。