Friday, April 3rd, 2009
Auto Scrolling Parallax Effect in CSS
<p>
Paul Hayes is off doing more fun things, this time creating an auto scrolling parallax effect with CSS, specifically using multiple background images on a single element and the -webkit-transition property to provide the auto-scrolling.
All with a bit o' CSS:
CSS:
-
-
#background {
-
background: url('../images/foreground.png') 5% 5%,
-
url('../images/midground.png') 20% 20%,
-
url('../images/background.png') 90% 110%;
-
top: 218px;
-
left: 0;
-
right: 0;
-
bottom: 0;
-
position: fixed;
-
-webkit-transition: left 300s linear;
-
}
-
-
#experiment:target #background {
-
left: -5000px;
-
}
-
-
#experiment:hover #background {
-
left: -9999px;
-
}
-
Related Content:
1.4 rating from 252 votes
I suddenly have the urge to go find and play a game of Defender, lol.
I get that this example is kind of silly but who felt compelled to vote-stuff it? 9_9 get a life guys.
Very interesting – hopefully these CSS transitions will become standard so we can finally stop using hacked together effects based on setTimeout etc. in Javascript.
Interesting… MS gave us DirectX-based filter capabilities in CSS years ago, and everyone said “oh no, we can’t use this, it’s proprietary crap!”… fast-forward a few years and now when Safari and Chrome provide something similar everyone says “oooohhh, I hope that becomes a standard!”. A bit ironic, no?
I agree, fzammetti. I think that “time” is an event trigger sort of thing. And event driven CSS is a strange path to go down. Yes, we have :hover and the like. To be a purist, :hover really doesn’t belong in CSS by this “rule” but it’s just too useful so I wouldn’t argue removing it. Maybe it’s a case that this is all new and I just need to let is soak in before I grumble too much more (re: http://ajaxian.com/archives/creating-a-clock-in-css)