Web Development Examples by Andria Bird

Parallax Scrolling

This will display an animated GIF of Parallax Scrolling

One of the biggest trends in websites right now is parallax scrolling. Parallax scrolling is a technique where background images move slower than foreground images, creating a 2D depth illusion for the user when scrolling. This technique was originally used in video games in the early 80’s and it’s come a long way since then! In researching this topic, I found this quote by Josh Chan to be interesting: “We scroll and something happens. Capitalizing on the instant feedback when interacting with parallax scrolling websites is a great way to pull people into your site and entice them towards your calls to action. (Chan)” He gives a list of websites that feature parallax scrolling and notes that it adds layers and depth to the user experience. It is very important for developers who design parallax scrolling websites to do cross-browser testing as it is likely that they are employing the use of HTML5 and CSS3.

So, how do you add parallax scrolling to your website? If you use Wordpress, they offer some guidance as they have a Parallax Scrolling admin page that gives you the short code required for all parallax scroll post types defined. They also mention that you can use the plugin directly in your PHP code. It is good practice to be familiar with HTML, CSS, Javascript and jQuery to be able to properly implement parallax scrolling to your site. Aniruddha Mysore of Beebom says that “Parallax Scroll is an easy to use jQuery plugin which lets you create the parallax image scroll effect found on sites like Spotify. It is quite simple to use – just specify the required CSS classes for the image holders. Rather than using tags, to use this plugin you must use elements which have a background image specified( by using the `background-image` CSS property. You can make the elements responsive using CSS @media queries. (Mysore)”