Auto Scrolling Parallax Effect in CSS

Tags: General, CSS

I am probably really going to be showing my age here, but when I first started programming in the days of the Commodore Vic 20 and Commodore 64. One of the things that used to blow us away was the ability to take images and parallel scroll them, back then it was a case of the wow factor as it wasn't really a big thing.

Now nearly 30 years later I have come across that wow factor one more time, and I have to say that the this is really awesome to see these sort of things in CSS. So without further fan fare, check it out with your webkit enabled browser.

Developer Paul Hayes has been doing some 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.

#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; }


TweetBacks


Comments (Moderated) | Add Comment

There are no comments for this entry.