The Parallax scrolling effect uses multiple elements where the background moves at a slower rate to the foreground element to create a 3D effect as you scroll the web page. There are many JQuery plugins available such as; Parallax.js, ScrollMagic, Skollr, and Stellar.js. All great plugins that take some work to implement on your WordPress site.

Below is a quick and easy alternative to one of the mentioned JQuery plugins using css and html to achieve the popular parallax scrolling effect.

First the css. We use the html5 section element to set the area on the page where you would like to implement the parallax effect.

 
Simply add your section tag and content to your document. The code uses Bootstrap grid tags to demonstrate placement of content within your parallax effect.

 
Fast and simple to implement without having to add a JQuery plugin and hope it works with your WordPress install. You can add as many elements as needed by adding a new class to hold your background image and adding the section to the template file.

Tags: , ,

Categorised in: ,

This post was written by Steven Soehl

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz