CODEWITHSUNDEEP
css
user160820
user160820

Reputation: 15220

Images Scrolling From Right to Left with CSS only

I have a DIV containing 10 images. I want to scroll this the images in this DIV from Right to Left without using JavaScript. Is it possible?

Thanks in advance.

Upvotes: 0

Views: 6145

Answers (5)

Spudley
Spudley

Reputation: 168755

The short answer is: No, you can't do animations using pure CSS, at least not yet. CSS animations and transforms are on the cards, but are not standardised yet, nor widely enough supported to make them worth using.

However, that said, you should have a look at this:

http://www.romancortes.com/blog/pure-css-coke-can/

A clever rolling/scrolling effect using nothing but standard CSS. No Javascript, no CSS-animation or transforms. Very very clever. It even works in IE8.

Of course, it is using some very sneaky CSS tricks to achieve this, so it's not a technique that you'll be using in every-day code. But the question was "is it possible?", not "is it possible without being excessively clever and hacky about it?"

Upvotes: 1

DanMan
DanMan

Reputation: 11561

Well, you just give that div containing the images a fixed width and set the whitespace: no-wrap via CSS. Then just add overflow: auto to the div, and that should be it.

Upvotes: 0

Matt Asbury
Matt Asbury

Reputation: 5662

No. As it is now CSS cannot handle animations. You will need to include some sort of javascript to handle this for you. It's not as complicated as you may think though as current frameworks do all the heavy lifting for you. I personally recommend jQuery http://jquery.com/ but there are others out there. There are people who have solved problems like your and created plugins which you should be able to drop onto your site to give you the functionality you require if you aren't sure about creating it yourself http://plugins.jquery.com/

EDIT

I should add that while some CSS animation is possible, it will not be supported in some browsers.

Upvotes: 0

Dan
Dan

Reputation: 2341

It is possible by using transitions which is a CSS3 feature, so it doesn't work in IE. It does work in ff3.6+ and chrome dunno about the reset of the browsers though, as I didn't have time to test them.

https://developer.mozilla.org/en/CSS/CSS_transitions

Upvotes: 0

benhowdle89
benhowdle89

Reputation: 37494

http://www.the-art-of-web.com/css/css-animation/

Credit to Google for the search :)

Like the above comment says, this is CSS3 so you're limited on support for browsers

Upvotes: 0

Related Questions