是否有一个jQuery滑块/幻灯片插件,当它们可用时使用css3动画?

时间:2012-03-23 08:57:51

标签: jquery html css jquery-plugins css3

我的问题是,是否有一个插件,可能与jQuery Cycle不同,它可以处理和使用3d变换/ css3过渡来处理动画,如果它们可用的话?

我找到的一个很好的选择是Flexslider(注意:Flexslider不能100%使用jQuery 1.7),因为它在与触摸和滚动事件的兼容性方面得分很高。但是我发现当你想要一个不同的动画时,它并不是那么可扩展。

我需要一个cover animation(我认为演示可能有点破碎,幻灯片需要从旧幻灯片的右侧向左侧滑动)但我真的只是对jQuery插件感兴趣在可能的情况下使用css3动画并且可以进行排序。

必须有:

  • CSS3在可能的情况下进行转换,为旧版浏览器提供回退
  • 足够灵活,可以将next / prev绑定到触摸/滚动事件
  • 如果还没有现成的封面动画,则可扩展/可用

有些优点是:

  • 现成的触摸/滚动集成
  • 幻灯片之间的导航
  • 动画之前/之后的挂钩

虽然这些最后的项目我可以根据需要轻松制作自己,但我只是不想开始转换逻辑,如果有人比我更聪明已经做过一次并让它可用......

要清楚;我需要这个来支持移动设备(iOS,Android),当被迫进行硬件加速时,转换是目前最流畅的方式来获得任何活动内容。

准确的问题尚未得到解答,因此仍然可以打开并获得答案

如果有人能提供,我会给予另一个赏金以获得确切答案。

7 个答案:

答案 0 :(得分:5)

我个人非常喜欢使用Slicebox

http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

它为有能力的浏览器提供了很好的3D过渡,但在其他浏览器中却优雅地回归。

答案 1 :(得分:2)

royalslider可以工作

http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/

在鼓室网站上实际上有很多很好的例子/教程。

答案 2 :(得分:2)

如果您的示例是循环,请尝试Cycle2响应支持swippe并接受Css转换(请参阅API转换) http://jquery.malsup.com/cycle2/ 如果你想要一个非常简单的幻灯片试试tcycle。

http://jquery.malsup.com/cycle2/tcycle/basic.php

答案 3 :(得分:1)

看看http://www.sequencejs.com/。不确定它是否正是您正在寻找的,但它使用幻灯片的CSS3动画

答案 4 :(得分:0)

你的问题并非完全相关;让我解释一下......

有一个名为“requestAnimationFrame”的新javascript命令,它基本上是css3过渡的javascript等价物。它允许浏览器安排重绘事件,以便对其进行优化。 如果可以的话,这已被引擎盖下的jquery使用了。这意味着它适用于使用animate()命令的所有库。所以:别担心,这是照顾:)

请注意,您无法使用javascript动画真正拥有css过渡回退。这两者是完全不同的,因此你会在行为上得到各种奇怪的差异。 (对于非常特殊的情况,它可能会很好,但你很快就会发现自己陷入了死胡同)。

答案 5 :(得分:0)

尝试使用Cu3er。伟大的动画。可通过API扩展。倒退。作品......

http://getcu3er.com/

(不是jQuery,本身,但Javascript,并且会在你的应用中做到你需要的,强大且同样容易。)

另外:查看Photoswipe ...这是jQuery,可以不用费力地调整。我用它来创建一些有趣的响应式图像库。但滑块也是其可能安装的一部分。

http://www.photoswipe.com/

答案 6 :(得分:-1)

看看Isotope,它集成了后备。

http://isotope.metafizzy.co/docs/animating.html