How To Add Parallax Effects To Your Website

One of the most popular, most wanted and freshest visual effects right now is the Parallax Effect. You have seen it many times previously for sure, even without knowing its name 🙂

Parallax scrolling term (also called “asymmetrical scrolling”) defines the technique in computer graphics and web design, where the background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion. In other words, Parallax Effect is a trendy web design trick created by an illusion that stationary background images are moving slower than the content elements in the foreground.
Even if you are not a super-pro-skilled tech guru you can recognize it and differ pages with parallax scrolling effect and without it.

No doubt it looks much better. You can use the Parallax effect on any part of your website pages, which make them look stunning, dynamic and alive. This effect can be your secret tool or the magic wand in nowadays web struggle. It is universal and unique weapon that can find its place and application everywhere. You’d have to agree that Parallax backgrounds help better users engaging, improve the overall experience and create special relaxing atmosphere that a website provides.
The second, but no less significant concern is how the mechanism of parallax scrolling effect can be achieved. So, get ready, here comes the geek-part of this post.

If you are looking for an answer on this question we can suppose that you have some basic knowledge and skills in coding. And hope you won’t be scared of lines of code , valued and attributes 😉 Otherwise, it would be much more complicated to figure this out. So, get it started.
Everything begins with building of 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. Consequently, we get the following:

<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 adipisc.
Text content goes here and here and here etc.<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 adipis.
Text content goes here and here and here etc.<div>

</div>

Now it’s the turn of CSS file to be processed by customizing of .parallax_section. Give it a proper height, and other attributes like, background attachment, position and size. In this example we’ll get these:

.parallax_section{

        height: 600px;

        background-repeat: no-repeat;

        background-attachment: fixed;

        background-size: cover;

        background-position: 100% auto;

               position:relative;

}

The next step is a required image inserting. For that purpose, we look for another selector – .parallax_image_first. Add pass to the file.

.parallax_image_first{

         background-image: url("../images/del/diagonal_background.jpg");

}

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

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

Now, let’s take a look at how to build parallax scrolling with JavaScript. For that we will use a ready-made jQuery plugin from pixelcog.com. It is actually one of the simplest plugins to worke 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. To do that, use a piece of ready code.

Type the specifications in the CSS file.

.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.

The Internet gives dozens of other shorter and longer, easier and harder explanations and examples of how Parallax Effect can be added to a website. In order for you to dive in deeper the question, check the following tutorials:

• Simple parallax scrolling tutorial
• A Simple Parallax Scrolling Technique
• How to Build a Simple Parallax Website
• How TO – Parallax Scrolling

Hope we helped shed some light on Parallax Effect achieving question. And as a bonus for your attention and time please check how easy and skillfully true professionals of web design like TemplateMonster deal with Parallax Effect web sites.

There you can find ready-to-go Parallax scrolling templates which are the right thing for building top-notch websites. In case, you have no time for coding and learning HTML and JS, go ahead and look through ready-made Parallax effect solutions.
Now you absolutely need to implement Parallax into your future project, since it certainly is one of the greatest trends on the Internet. The benefits of using Parallax effect are quite obvious and cannot be overestimated.
So, keep calm and do Parallax!