Parallax websites are one of the latest and biggest trends on the web for some time now. If you want to impress your clients or implement immediate impact on your site, this is a good choice for you. In this tutorial, I’ll teach you how to create a simple but beautiful parallax website that will create an illusion of 3D depth to your site. It will surely catch your viewers’ attention. So let’s dig in.
Introduction to Parallax
According to Wikipedia, Parallax came from the Greek word παράλλαξις (parallaxis) meaning, “alteration”. It is the displacement or the difference in the apparent position of an object viewed along two different lines of sight. This Parallax scrolling effect became popular back in the days when Nike released its stunning and brilliant design website named “Nike Better World” as support to the athletes around the world. The website had achieved a lot of good reviews from different sites for its amazing Parallax scrolling effects and web design. Parallax has existed since 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.
Parallax Website Examples
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.
The Design Concept
Since Christmas Season is just around the corner, we created a Christmas type mock-up design in Photoshop.
Download Source Files
View Demo
Resources You Will Need to Complete This Tutorial:
Wellfleet (Google Font)
Arvo (Google Font)
Oswald (Google Font)
Goudy Bookletter 1911 (Google Font)
Images used in this tutorial
High resolution Christmas images (You can download free images here or you can use your images on the PSD file above)
Time and patience
File Structure
For our file structure, we will create three folders and one HTML file:
index.html – this will serve as our main file. All of our designs will be utilized on this file.
js folder – for our JavaScript/jQuery
img folder – for our images
css folder – for our styling (CSS)
The HTML Markup
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.
The CSS
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 screens as well as the container of each slides.
Now let’s go 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 like exactly the same with our PSD design.
The jQuery
Let’s put this Parallax site into 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 and this.pathname. We can then make sure that the link includes a qualified URL or just an identifier.
For this part, when the user click 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.
Tips: You can also make the speed of the scrolling effect faster or slower by simply by 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.
Final Words
Parallax 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 the Web, you will see a lot of advance Parallax sites that will 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. Hope you enjoyed this tutorial. Please feel free to leave links, comment or suggest if you learned in this tutorial. Until next time!