Rotating CSS Image Slider

http://cssdeck.com/item/preview/308/awesome-rotating-css-image-slider

by js4all • 14 years ago

14 15 14 years ago

cssdeck.com

jstabbac• 14 years ago

Hmm, doesn't seem to work in Opera 11.62

kushsolitary3• 14 years ago

Opera and IE are not supported

simonbrown• 14 years ago

Hurts my eyes a bit.

mistercow2• 14 years ago

It's very glitchy in Chrome 18.0.1025.162 . Parts of the image get clipped off during and after the transitions, and there's some random pausing.

kushsolitary3• 14 years ago

Try it now, I commented out the hover part as it might be causing the problems. Should work fine now.

mistercow2• 14 years ago

Yep, much better.

jan-hocevar2• 14 years ago

It's a bit buggy in Chrome 18

kushsolitary3• 14 years ago

Try it again. I improved the code a bit

jan-hocevar2• 14 years ago

Nice!

yaix• 14 years ago

The CSS3 development is at a point where we should be careful not to repeat the eye-huring things we did to Flash.

All these "amazing" examples of what CSS3 can do are... well, amazing, considerings the limitations of CSS2. But also dangerous, considering "flash based web sites".

Remember that a user may want to see the same page several times. Copy-paste parts of it. Have a closer look at a specific item on the page. Cares for the content, not the weird movements it is doing.

lbotos• 14 years ago

I agree with what you are saying but this was a contrived example. The effect is "too the max" and not completely thought out from a UX perspective.

The downsides with flash were the accessibility issues and the fact that it was a browser plugin. This is baked directly into the browser and if coded correctly I think can be used sparingly for a good effect. As much as we browse the web for content, as long as it is displayed effectively (in a static or dynamic) manner is what counts.

novalis• 14 years ago

You will always find bad design and poorly thought UX. I don't like attributing fault to Flash, CSS3 or whatever next. It should be linked to who codes it in and not the platform. There is no accessibility issue with the platform you reference if it is done correctly, unfortunately you probably have been exposed to the worst it can do, still; effective content display and proper dev are separate issues.

victork2• 14 years ago

Spot on. I've grown sick of these "amazing" or "beautiful", it's very relative, CSS animations. As you say it looks like what Flash was at the worst of its time or even before animated gif images were to geocities. I would be laughing if in a few years we'll look at these CSS3 animations the same way we look today at the ridiculous design of Geocities pages.

If you look at very CSS-heavy website around + JavaScript it brings to its knees my poor old computer (it's ridiculous, it's only 2 years old), it feels bulky and laggy, prevent me from copying sometimes even looking at things...

Doing complicated things with heavy CSS animation is (relatively) easy, but bringing to end users a simple yet elegant and useful design should be a webdesigner's job, not these hacky-scrolling features, stuff that swirl around making it impossible to copy or even to look at. For your nice CSS tricks leave it as easter eggs for your most attentive visitors, they'll love the feeling of having discovered something hidden.

In CSS animations, less should be more.

ChrisNorstrom• 14 years ago

You read my mind with the comparison to flash. I've never in my life visited a fully flash-based website that didn't annoy the living heck out of me. Never. The transitions , no matter how quick, add up over time and become annoyances. So as excited as I think we all are about the future of CSS, there's a feeling of uneasiness about how those features are going to be used and what we're going to do WHEN, not if, but WHEN they get overused and over done.

I think now's the time to start working on a browser plugin that disables these "beautiful animations".

- Email introduced, email overused (spam, grey spam, newsletters) we started using spam filters.

- Ads introduced, ads became overused, we install ad blockers.

- Flash introduced, flash became overused, we installed flash blockers.

- Facebook/twitter/sharing Widgets introduced, became overused, we install widget blockers.

- 2012-2014. CSS animations and transitions introduced... you get the picture.

jsavimbi• 14 years ago

One of these days I'm going to pull a metric out of my tuccus explaining to anyone who'll listen that the use of slides for anything other than a presentation [slide deck] is very annoying to the user.

Rotating CSS Image Slider

Related Stories