Friday, April 3rd, 2009

Auto Scrolling Parallax Effect in CSS

Category: CSS, Examples

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:

  1. #background {
  2.         background: url('../images/foreground.png') 5% 5%,
  3.                 url('../images/midground.png') 20% 20%,
  4.                 url('../images/background.png') 90% 110%;
  5.         top: 218px;
  6.         left: 0;
  7.         right: 0;
  8.         bottom: 0;
  9.         position: fixed;
  10.         -webkit-transition: left 300s linear;
  11. }
  12.  
  13. #experiment:target #background {
  14.         left: -5000px;
  15. }
  16.  
  17. #experiment:hover #background {
  18.         left: -9999px;
  19. }

Posted by Dion Almaer at 1:01 am
5 Comments

+----
1.5 rating from 258 votes

5 Comments »

Comments feed TrackBack URI

I suddenly have the urge to go find and play a game of Defender, lol.

Comment by ck2 — April 3, 2009

I get that this example is kind of silly but who felt compelled to vote-stuff it? 9_9 get a life guys.

Comment by eyelidlessness — April 3, 2009

Very interesting – hopefully these CSS transitions will become standard so we can finally stop using hacked together effects based on setTimeout etc. in Javascript.

Comment by Darkimmortal — April 3, 2009

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?

Comment by fzammetti — April 3, 2009

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)

Comment by Malic — April 6, 2009

Leave a comment

You must be logged in to post a comment.