The Parallax scrolling effect became popular back in the day when Nike released its stunning and brilliant design website named “Nike Better World” as support to the athletes around the world. The site had achieved a lot of good reviews from different sites for its amazing Parallax scrolling effects and web design.
Parallax has existed since the 1980’s and was used in video game titles and later was used on websites. Today, it is one of the most widely-used designs on the modern Web.
There hasn’t been a design style that has captured the web’s creative community like that of parallax website design in ages, which, in non-industry terms, is about a few months. You might be wondering what parallax website design is.
Well, actually you have heard it, and seen its used for some time now. Before going into showcasing some really well-designed websites utilizing parallax design, let’s take some time to examine and explain what it is.
By definition, parallax means the apparent displacement or the difference in apparent direction of an object as seen from two different points not on a straight line with the object. In web design use, parallax refers to the scrolling technique used to create the illusion of depth on websites.
This technique is not new. However, this technique has been around for quite some time in the web design community before its recent rise to a trending style. The use of this technology to create the illusion of depth can also be traced back to older forms of media, like old school video games for instance. Below you’ll find some nicely designed websites that masterfully utilize this hot new trend.
To show you how this Parallax scrolling effect looks like I’ve collected sites that utilize the Parallax scrolling effect. Check out the following examples below.
After learning what parallax website design is, and seeing some really well-designed sites utilizing this hot style, you’re probably wondering how you can use this style in your next design. Fortunately for you, implementing this style is not that difficult. There are actually four easy to understand methods that can be used to create a parallax website design.
For our file structure, we will create three folders and one HTML file:
On our HTML file, we will add first the HTML5 doctype and series of links on our head section. This will include our link to the CSS file and Google Fonts links followed by our jQuery library file.
Let’s skip the jQuery code and discuss it later. For now, let’s continue with the HTML elements. We will add a header tag with the logo and navigation inside. The navigation will link to the specific slides. Later, we will add a smooth scrolling effect to make it look good.
Next let’s add the slides. We will put an ID to each slide which corresponds to its sequence. Inside of each slide, we will put a class of content to center the elements.
Now that we already put all of the HTML elements, our site will look like this.
We need to do our CSS general styling first. Let’s start by adding styles to our body tag as well as H1, H2, and H3 tags. We will set the font “Museo 700” as our fonts for our H1-H3 tags. We will put shadows on each of them.
Next, let’s add the other general styling. This will include the positioning of the elements on screen as well as the container of each slide.
Now let’s style the header section. We will add an image with a black background and add 60% opacity to the header, which will hold the logo and the navigation. For the logo, we will float it to the left, and for the navigation, we will float it to the right.
Then, let’s add styles to our quotes, author, and images as well as to the quotes container.
Each slide will have a background image or white background color with fixed position. We also need to add some padding to each slide to center the elements inside it.
Lastly, we will style our copyright text and center it to the screen.
Now that we put all of our CSS styles, the look of our site will look just like our PSD design.
Let’s bring this Parallax website to life. On the head section, we are going to add the following jQuery codes. Check the Reference URL.
On this part of the jQuery code, we’re creating a click event handler to all the links that have “#” symbol anywhere in the href. The very next line, we will check if the link is pointing to the same page by checking for a match between location.pathname. We can then make sure that the link includes a qualified URL or just an identifier.
For this part, when the user clicks the menu link, it will remove the class active on that current active menu link and add it to that menu link that the user has clicked. This will also scroll to the target div id section.
Tip: You can also make the speed of the scrolling effect faster or slower by simply changing the value of 1000. (1000 means 1000 milliseconds). You might also want to use the value “fast” (200 milliseconds) or “slow” (600 milliseconds). Take note that the default is 400 milliseconds. It depends on what you need or want.
Parallax website scrolling effects are slowly being implemented on a lot of sites across the Web. If you take the time to look for more inspiration around, you will see a lot of advanced Parallax web designs that are sure to blow your mind.
Today, I’ve shown you how to do a relatively simple parallax scrolling website; you can play around with it and improve it at your leisure. Have fun!