build wordpress website in 5 days build motocms website in 5 days

How to Create Parallax Effect with Pure CSS

Parallax is one of the most popular effects in web design. It makes the background image move at a slower speed compared to the foreground as you scroll down the page. In this way, it gives the pages the feeling of depth and makes them look more dynamic.

Parallax can be used for both separate images or the entire layout of the website. It is quite a universal solution for any project. Take a look at the samples below:

Intacto

Here is a great example of an interactive timeline page. It looks quite cool ad dynamic and is a great solution for showcasing the "About" section of the site.

Graphicnovel

A comics like page from Peugeot company is another great alternative to introducing new products to a wider audience. The company created a short story to advertise their  hybrid model.

SoleilNoel

An attractive and at the same time fast website with smooth parallax scrolling. This kind of layout will be a great fit for portfolio and landing pages.

That’s pretty cool, isn’t it? Let’s take a look at how create the same effect and integrate it into any of your projects. So, basically you can create parallax scrolling with the help of JavaScript and on pure CSS.

What’s the difference you ask?

Well, you won’t see a great difference on a single image. The sites that feature multiple parallax scrolling will load much slower if built on jQuery. At the same time, the CSS based parallax is more difficult to adjust to the viewport of the browser. So, let’s take a look at this method.

First of all, we will built the HTML structure of the page. The first block will contain the image, in the second section we will place some content to make parallax look more distinct. Eventually, we will get something like that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="parallax_section parallax_image_first">
  <div class="center">
    <article>Some text  </article>
    </div>
  </div>
<!--Block with content--> 
<div class="content_block">
  <div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.</div>
</div>
<div class="parallax_section parallax_image_second">
  <div class="center">
    <article>Some text  </article>
    </div>
  </div>
<!--Block with content--> 
 
<div class="content_block">
 
<div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.</div>
 
</div>

Now let’s proceed to the CSS file. We need to customize the .parallax_section. Give it a proper height, and other attributes like, background attachment, position and size. In my case they will be the following:

1
2
3
4
5
6
7
8
.parallax_section{
	height: 600px;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
  	background-position: 100% auto;
		position:relative;
}

Next, insert the required image. For that we will use another selector - .parallax_image_first. Add pass to the file.

1
2
3
.parallax_image_first{
	 background-image: url("../images/del/diagonal_background.jpg");
}

Finally, let's give styles to the text on the image.

1
2
3
4
5
6
7
8
9
    font-size: 60px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 600;
    color: #fff;

Eventually, we came up with something like that.



DEMO | DOWNLOAD

Parallax with JavaScript

Now, let’s take a look at how to build parallax scrolling with JavaScript. For that we will use a readymade jQuary plugin from pixelcog.com. It is actually one of the simplest plugins I’ve worked with. To make it work, you need to download the jq library. Copy the parallax.min file to your project and add it to the html code.

Now, we need to add an image. For that, use a piece of ready made code

Type the specifications in the CSS file.

1
2
3
4
.parallax-window {
    min-height: 400px;
    background: transparent;
}

Style the text and preview the page. You can also change the options of the image right inside the html code. Thus we need to give a data- prefix to the variable and type it in the lower case.
For example, we need to change the scrolling speed. For that we add data-speed=”0.8” to the html and that’s it.
As you can see, it looks much distinct with the script, and requires less hand written code. So if the scale of the image is vital for the project, using the script is the right choice in all other cases you can do everything with CSS.


DEMO | DOWNLOAD

There is also a plethora of other parallax scripts on the Internet, let us know which one you prefer and how it performs. Share your ideas in the comments and let me know if I've missed something.