Parallax Scrolling Effect Component

The Parallax scrolling effect is commonly known as scrolling background effect. This web design technique is created using a web page scrolling feature to make parallax background content, such as an image, texts or even an empty space, moves at a slower speed than the foreground content.

This parallax effect technique can be applied to all HTML elements such as the <header> tag, <section> and <div> tags for in-page content and full-page or <footer> tag for footer. You can apply this technique more than once in a single post or page depending on your design preference.

Parallax scrolling tutorial

How to create a parallax scrolling effect

The parallax scrolling css uses background-attachment fixed utility as the main CSS element that makes parallax background area fixed and not to scroll with the rest of the page.

HTML Markup - Basic Installation for header.

CSS
HTML

<style type="text/css">
.background_image {background-image: url(https://Landscape Image URL HERE);}
@media only screen and (max-width: 767.98px) {.background_image {background-image: url(https://Portrait Image URL HERE);}}
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: 100% 100vh;
</style>

<div class="background_image"> 
   <!-- FULL-WIDTH FOR THE CONTENT -->
   <div class="mask rgba-black-light">
      <!-- CONTENT AREA -->
      <div class="container">
         <div class="row no-gutters slider-text align-items-center justify-content-start"> 
            <div class="col-12 d-flex justify-content-between align-items-center mt-5 pt-5">
               <!-- INSERT YOUR CONTENT MARKUP HERE -->
            </div>
         </div>
      </div>
      <!-- END OF CONTENT AREA -->
   </div>
   <!-- END OF FULL-WIDTH FOR THE CONTENT -->
</div>

YOUR TITLE

SUBTITLE

DESCRIPTION

Got Glitch?

HTML Markup Explanation

This Parallax Scrolling Effect Component may not able to properly fit in all theme designs. You can go through the HTML markup details below to easily correct your component setup.

Background-image

You can add background images by replacing the image URLS in the CSS element of background_image for desktop and mobile views.

Note : You must add the above CSS in your post when you want to use parallax scrolling effect because you need to add new image urls for background images.

Note : You need to rename your background_image class name to a new name such as 'background_image2' if you want to apply parallax scrolling effect more than once in a single post.

Alternately, you can use the inline-styling method to add your background images. This method does not require the CSS above. You need to add css elements into your <div> parent tag as shown below.

HTML markup for mobile view.

<div class="d-block d-lg-none" style="background-image: url("https://Your Portrait Image URL"); background-repeat: no-repeat; background-size: 100% 100vh; background-position: top center"> ... </div>;

HTML markup for desktop view.

<div class="d-none d-lg-block" style="background-image: url("https://Your Landscape Image URL"); background-repeat: no-repeat; background-size: 100% 100vh; background-position: top center"> ... </div>;

Height

This component will have a full-height view because the background-size is set with 100vh based on this HTML element.

You may override this set up for your in-page content by assigning a height value with your markup as below

In-Page Content : How to set the component height.

You need to add style="height: XYpx" to the <div class="row"> tag for the content. The "height: XYpx" must be less than the actual height of the background-image.

<section class="background_image">
   <div class="mask rgba-black-light">
      <div class="container">
         <div class="row" style="height: XYpx"> 
            <div class="col-12">
               <!-- INSERT YOUR CONTENT MARKUP HERE -->
            </div>
         </div>
      </div>
   </div>
</section>

Example of In-page Parallax Scrolling Effect

`<div class="mask rgba-black-light">`

The content of the component must be added inside this <div> in order to create a full width overlay to your component.

`<div class="container">`

You may delete this <div> for a full-width component setup.

The image size

You need to use a portrait image size for mobile views and a landscape image size for desktop view in order to avoid a distorted image display issue.

Conclusion

What is the effect of Parallax Scrolling Effect design to your post

The Parallax Scrolling Effect, which is shown in this post, is a design style for blogger components and in-page contents. This effect can be applied to your post content based on the <section> tag to style the post similar to a single-page website.

We have not encountered with any SEO issue on our blogger resulted from this style. In fact, the Parallax Scrolling Effect keeps a more engaging user experience and grows more chances to keep audience's interests with your article. Hence, it increases visit times and frequency.