Javascript Apple.com产品动画

将产品动画设置到位

有人知道苹果是怎么做到的吗

我不需要可用的代码。只是一个如何实现它的想法

我使用jQuery框架

编辑：感谢乔丹指出这一点。苹果正在为此使用css3动画，而不是javascript

---

如果有人对JS有什么好主意，请发表。

苹果正在使用CSS3动画。请查看并向下滚动至/*动画。

苹果正在为此使用CSS3动画。查看并向下滚动到/*动画。

这里我用jQuery制作了一个版本，它可以在所有浏览器中工作。使用这项技术，您可以使用多种不同的CSS方法来实现这一点，比如相对div中的绝对div，等等，然后使用jQuery的animate函数更改该值。我尽可能地简单

HTML

JS

另一种方法是使用css3http://jsfiddle.net/sanbor/SggMG/6/ 这也可以通过css3转换实现，更重要的是，只需在属性更改之间添加平滑效果，但动画允许应用特定的效果 HTML

JS

---

在这里，我用jQuery制作了一个版本，它可以在所有浏览器中工作。使用这项技术，您可以使用多种不同的CSS方法来实现这一点，比如相对div中的绝对div，等等，然后使用jQuery的animate函数更改该值。我尽可能地简单

HTML

JS

另一种方法是使用css3http://jsfiddle.net/sanbor/SggMG/6/ 这也可以通过css3转换实现，更重要的是，只需在属性更改之间添加平滑效果，但动画允许应用特定的效果 HTML

JS

---

---

为什么会有人投票否决我的问题？这没有道理。评论并解释你为什么这么做。我没有投你反对票，但我想猜测一下研究成果，因为你可以简单地通过他们的JS来发现，正如Jordan在下面的回答中指出的那样。我甚至没有费心去挖掘，因为他们获得了足够的流量，他们会缩小他们的JS。假设是错误的吗？你们知道他们怎么说假设的：谢谢大脑的解释。我知道有人会怎么想。我不想和你争论。为什么有人会投票否决我的问题？这没有道理。评论并解释你为什么这么做。我没有投你反对票，但我想猜测一下研究成果，因为你可以简单地通过他们的JS来发现，正如Jordan在下面的回答中指出的那样。我甚至没有费心去挖掘，因为他们获得了足够的流量，他们会缩小他们的JS。假设是错误的吗？你们知道他们怎么说假设的：谢谢大脑的解释。我知道有人会怎么想。不想以任何方式与你争论。这些是特定于webkit的动画吗？或者css3？它们是css3，在当前版本的Chrome、Safari、Firefox和Opera中受支持。我对IE10不太清楚。但是，该规范仍在不断变化，因此您会在源代码中注意到不同的关键帧规则：-webkit关键帧，-moz关键帧等，在不久的将来，您必须对您想要支持的浏览器执行相同的操作。太棒了，再次感谢。我同意它支持css3。我不关心使用旧浏览器的人，我是如何使用它的。这些是特定于webkit的动画吗？或者css3？它们是css3，在当前版本的Chrome、Safari、Firefox和Opera中受支持。我对IE10不太清楚。但是，该规范仍在不断变化，因此您会在源代码中注意到不同的关键帧规则：-webkit关键帧，-moz关键帧等，在不久的将来，您必须对您想要支持的浏览器执行相同的操作。太棒了，再次感谢。我同意它支持css3。我不在乎那些使用旧浏览器的人，因为我是如何使用它的。但是你能把代码添加到帖子里吗？jsfiddle链接很有用，但最好将代码留在文章中。谢谢+1用于跨浏览器。但是你能把代码添加到帖子里吗？jsfiddle链接很有用，但最好将代码留在文章中。谢谢

<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="clearFloat"></div>
<a id="resetAnimation" href="#">Run animation again</a>

.box {
    background: red;
    width: 100px;
    height: 50px;
    margin: 10px;
    float: left;
    margin-left: 100%;
}
.clearFloat {
    clear: both;
}

function animateBoxes() {
    $('.box').each(function(index, element) {
        $(element).animate({
            'marginLeft': '10px'
        }, {
            duration: 500,
            specialEasing: {
                marginLeft: 'easeOutBounce'
            }
        }, function() {
            // Animation complete.
        });
    });
}

$('#resetAnimation').click(function() {
    $('.box').css('marginLeft', '100%');
    animateBoxes();
});

animateBoxes();

<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="clearFloat"></div>
<a id="resetAnimation" href="#">Click twice</a>

.clearFloat {
    clear: both;
}

.box {
    background: red;
    width: 100px;
    height: 50px;
    margin: 10px;
    float: left;
}

.box.moveit{
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 1s;
    -moz-animation-name: moveit;
    -moz-animation-duration: 1s;
    -ms-animation-name: moveit;
    -ms-animation-duration: 1s;
    animation-name: moveit;
    animation-duration: 1s;
}

@-webkit-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@-moz-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@-ms-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

$('#resetAnimation').click(function() {
    $('.box').toggleClass('moveit');
});