Simple Full Page Parallax Effect

Joash Pereira
Joash’s Blog
Published in
1 min readSep 21, 2015
parallax_effect_joashpereira

The parallax effect a trend in the web design world. Normally seen as part of the webpage scrolling (moving between sections). It simply uses multiple backgrounds which seem to move at different speeds to create an interesting browsing experience.

For this simple Full Page Parallax effect. I have used the css property “background-size: cover;” to span the images full screen. For more on full scale background images read Top 5 Useful CSS snippets. And external javascript libraries jQuery and lodash.js for performance.

View Full Source and Demo on Codepen.

--

--