sg3s
sg3s

Reputation: 9567

Is there a jQuery slider / slideshow plugin that employs css3 animations when they're available?

My question is if there is a plugin, maybe not unlike jQuery Cycle that can handle and uses 3d transform/css3 transitions to handle the animations if they're available?

A good option I found is Flexslider (note: Flexslider does not work 100% with jQuery 1.7) because it scores well on compatibility with touch and scroll events. But I find that when you want to have a different animation it is not that extendible.

I need a cover animation (I think the demo might be a bit broken though, slide needs to slide over from the right side to the left over the old slide) but I am really just interested in a jQuery plugin that employs css3 animations where possible and is sort-off extendible.

It must have:

Some plusses would be:

Though those last items I can easily fabricate myself if needed, I just don't want to start on the transition logic if someone smarter than me already did that once and made it available...

To be clear; I need this to support mobile devices (iOS, Android) and transitions are currently the smoothest way to have any active content, when forced to be HW accelerated.

The precise question has not been answered so it's still open and up for an answer

I will award another bounty for an exact answer if anyone can provide it.

Upvotes: 4

Views: 3462

Answers (7)

Ana
Ana

Reputation: 21

If your example is cycle try Cycle2 is responsive support swippe and accept Css transition (see API transition) http://jquery.malsup.com/cycle2/ If you want a very simple slideshow try tcycle.

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

Upvotes: 2

Sean
Sean

Reputation: 1159

Try Cu3er. Great animations. Extensible via the API. Fallback. The works...

http://getcu3er.com/

(Not jQuery, per se, but Javascript, and will do what you need in your app, robustly and just as easily.)

Also: check out Photoswipe...which is jQuery, and can be tweaked without too much effort. I've used it to create some interesting and responsive image galleries. But a slider is part and parcel of its possible installs, too.

http://www.photoswipe.com/

Upvotes: 0

Last Rose Studios
Last Rose Studios

Reputation: 2481

take a look at http://www.sequencejs.com/. Not sure if it exactly what you are looking for, but it uses CSS3 animations for the slides

Upvotes: 1

mson
mson

Reputation: 7824

royalslider may work

or

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

There are actually a bunch of nice examples/tutorials on the tympanus site.

Upvotes: 2

SpaceBeers
SpaceBeers

Reputation: 13947

Personally I've really enjoyed working with Slicebox

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

It has nice 3D transitions for capable browsers but falls back gracefully in other browsers.

Upvotes: 5

Sven Bieder
Sven Bieder

Reputation: 5681

Take a look at Isotope, it has the fallback integrated.

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

Upvotes: -1

kritzikratzi
kritzikratzi

Reputation: 20221

your question is not all that relevant; let me explain ...

there is a new javascript command called "requestAnimationFrame", which is basically the javascript equivalent of css3 transitions. it allows the browser to schedule the repaint events so it is nicely optimized. if available this is used by jquery under the hood already. that means it applies to all libraries that use the animate() command. so: don't worry, it's taken care of :)

note that you cannot really have a css transitions fallback with javascript animations. those two are quite different and thus you'll get all sorts of weird differences in behaviour. (it might be fine for very special cases, but you'll quickly find yourself in a dead end).

Upvotes: 0

Related Questions