The jQuery Slider Plugin with Infinite Style | Hacker News Reader

The jQuery Slider Plugin with Infinite Style

sequencejs.com

125 pointsearlyriser26 comments

This looks great, but it really annoys me when Javascript/CSS plugins don't explicitly state their browser support.

'Gracefully degrades in older browsers' means different things to different people, and without a quick chart I'm much less likely to invest the time in trying it out.

Site now says: "Tested down to Firefox 3.6 and IE7. Extensive support details to come"

The plugin works in all browsers that support CSS3 transitions and gracefully degrades down to Firefox 3.6 and IE7.

Looks good, but it won't respond to events until the animation finishes, which is pretty much guaranteed to annoy site users.

Hi Joeri,

I plan to add an option in the future to allow frames to be skippable regardless of whether they're animating or not. Just need to come up with a good way of doing it without elements flying all over the place.

Looks great other than the transitions jittering a bit (on ubuntu chrome)

Thanks, haven't put a huge amount of testing into performance yet and I haven't got a copy of Ubuntu installed but I'll add this to the todo list.

On that note, two things. First, when you actually start the animation, make sure that the images are loaded first. If I hit one the demo sites with a cleared cache, the images pop in pretty bad. Use document.onload instead of $(document).ready

Second, mobile performance is dreadful. From what I understand, you have it using CSS3 animation and simply add animations into divs. My suggestion would be to default to javascript on mobile. Most mobiles don't have css animations optimized as heavily as javascript animations.

Im not an expert, but isn't it exactly the other way round? CSS3 is usually hardware accelerated, whereas Javascript is completely CPU based

Thanks, I'll be adding a preloader in v1 so the loading is more graceful.

I'm yet to test on any mobile device other than iOS so I'll keep your suggestion in mind.

I completely disagree with this advice. The purpose of CSS3 animations were to get hardware acceleration!

I suspect any performance issues on mobile devices are down to the plugin having to do a lot of work in the DOM, rather than the CSS3 transitions themselves being slow.

Also, it'd be interesting to know what mobile browser your seeing performance issues in. Note that Opera is unfortunately buggy when it comes to CSS3 transitions and I had to write a horrible workaround to get it working. Expect Opera to have performance issues until they fix the bug.

It seems to be breaking my back button. Especially the 3rd example (after a few transitions have gone by).

Hi Smudge,

I'll look into this, thanks.

Hi, it's breaking mine as well. I'm on Chrome 17.0/OSX 10.7.2

ok, thanks. Will take a look at this tomorrow.

From the site: "Unique transition styles created using CSS3"

Couldn't these "Unique transitions" be applied to most existing slideshow plugins, since they are done with CSS3 and not the plugin itself?

Say, if I was using http://slidesjs.com/, I could do `addClass('animate-in')` using the `animationStart()` event.

I say this as I'd like more people to contribute to a solid, widely used and tested slideshow plugin, instead of adding another choice--of course this assumes that there's no need for another choice.

Hi,

I'm not familiar with slidesjs.com so I can't compare the two but the way in which Sequence is built is very much different to other sliders that I have come across. Sequence basically just controls the attribution of class names (animate-in and animate-out), allowing a sliders transitions to be completely written in CSS.

This is a good (and fair) question. Sequence doesn't appear to do a ton of stuff the box, without applying a theme from the site or one of your own design.

That is, however, why I love this idea. It looks like this provides a good foundation for creating a slider; a nice interface, well documented options and callbacks, and nothing more.

I feel like I can actually build something of my own with this instead of clobbering an existing slider plugin with my own code until it does what I want. This is a much sharper tool than a widget pre-bundled with style defaults.

Well said. And, I agree. I didn't even think of enhancing an existing basic JS slider with additional animations using CSS3.

I'm still not sure if I'll switch from SlidesJS to Sequence, just because I am quite familiar with the SlidesJS source. But, definitely good work by ianlunn--I'm going to attempt a similar effect with SlidesJS sometime soon.

Serious question - why aren't there more efforts to do things like this but using canvas? I'm just starting to work on a new comic web app, was planning on using canvas for the page viewer, am I missing something or is the same <div> exchange from 2k6 still the way to go?

You could probably simulate its effects with either impress.js or jmpress.js, which DO use Canvas.

I recommend you go through the shows on both of these.

http://shama.github.com/jmpress.js/#/home

http://bartaz.github.com/impress.js/#/bored

Looks great. Any plans for a Wordpress based theme revolving around this or a plugin?

Hi krmmmalik,

I would like to turn this into a WordPress plugin in the future although as I've only just released the beta, I'd like to spend my spare time improving that first.

Looks slick. Great work!

Very nice. forked!

Reply on news.ycombinator.com