重新创建photojojo幻灯片技巧

我正在寻找一些关于如何重新创建此功能的指导。它的功能是当你点击DO NOT PULL时，通过动画滚动到一个锚点按钮。你可以在这里看到它的动作。 http://photojojo.com/store/awesomeness/iphone-dot-pano-lens/重新创建photojojo幻灯片技巧

任何人都可以帮助我理解这是怎么发生的？源代码告诉我什么..

问候

来源

2012-02-01 andresmijares25

有两种方式 - 你可以让闪光灯和出口复杂的动画为GIF，或打闪光灯。

然后对事物的JS端，你将设置为如2秒的超时，当这种情况发生 $('html').scrollTop(600); //实际上是一个可以为任意数量的只是一组位置滚动

等完整的执行将是什么像

$('btn').click(function(){ 
    $('#wrapper').append("<img src='myanimation.gif' id='ani'>"); 
    setTimeout(scrollDown,2000); 
}); 

function scrollDown(){ 
    $('html').scrollTop(600); 
    $('#ani').remove(); 
}

来源

2012-02-01 21:12:33

谢谢你的回答德鲁，'btn'，会是触发器类的权利？ – andresmijares25 2012-02-01 21:20:32

是的，它会触发动画被添加和播放。并且将GIF添加到页面中，并且计时器将开始假定您的动画是2秒长，2秒后它将滚动页面。在动画结束后，您需要添加一秒左右，以便它保持静止，以免循环。 – 2012-02-01 21:38:48

引用德鲁的答案，这个特殊的例子不是做Flash或GIF。

他们所做的都是将六张PNG图像叠加在一起并隐藏起来。然后，一旦用户交互发生，他们显示然后隐藏序列中的每个图像。随着最后一张图片可见，他们然后执行页面滚动。动画完成后，序列中的最后一个图像会再次隐藏。冲洗重复每次点击。

德鲁的滚动页面的方法将正常工作。如果你想放松或其他更复杂的控制，你也可以使用.animate（）方法。

来源

2012-02-01 21:31:00

附注：看起来他们也会稍稍动画一个或多个PNG图像，使其看起来更平滑（反弹等）。 – 2012-02-01 21:34:02

重新创建photojojo幻灯片技巧

回答

相关问题