tag: parallax

Auto-scrolling Parallax Effect without JavaScript

Correctly rendered background images for parallax effect

Here’s another quick CSS3/WebKit tran­si­tions project in the con­tro­ver­sial realm of CSS ani­ma­tion. This time I have opted to recre­ate the pop­u­lar par­al­lax effect using mul­ti­ple back­ground images on a sin­gle ele­ment and the -webkit-transition prop­erty (doc­u­men­ta­tion). I have based this on Chris Coyier’s par­al­lax tuto­r­ial, reusing the star images with per­mis­sion, the tech­nique itself was coined by Paul Annett (expla­na­tion on Think Vit­a­min). If you’re not quite sure what par­al­lax is, then Chris and Paul both go into some depth to explain it and Wikipedia is always help­ful.
Read More »