Using Parallax with Multiple Backgrounds

In this article, Solodev will teach you how to add Parallax Images with multiple backgrounds to your website.

Add Parallax Images with Multiple Backgrounds Using jQuery ScrollTo

In this article, Solodev will teach you how to add Parallax Images with multiple backgrounds to your website using jQuery ScrollTo by Ariel Flesler. Parallax creates a depth and transition effect when scrolling down and creates smooth scrolling throughout your website, thus enhancing the user experience (UX).

Below is the HTML, CSS, and JavaScript required.

Demo on JSFiddle Download from GitHub

Step 1 - parallax.html

Add the HTML below to your web page

<div id="intro">
   <div class="story">
      <div class="float-left">
         <h2>The Way of the Future</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio.</p>
      </div>
   </div>
   <!--.story-->
</div>
<!--#intro-->
<div id="second">
   <div class="story">
      <div class="bg"></div>
      <div class="float-right">
         <h2>Fun with Multiple Backgrounds</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio.</p>
         <p>Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
      </div>
   </div>
   <!--.story-->
</div>
<!--#second-->
<div id="third">
   <div class="story">
      <div class="float-left">
         <h2>Why is Parallax so Awesome?</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio.</p>
      </div>
   </div>
   <!--.story-->
</div>
<!--#third-->

Step 2 - parallax.css

Download the CSS below and include it in your web page

parallax.css

Step 3 - scrolling.js

Add the JavaScript below to a file called scrolling.js

$(document).ready(function(){
        $('#nav').localScroll(800);
        $('#intro').parallax("50%", 0.1);
        $('#second').parallax("50%", 0.1);
        $('.bg').parallax("50%", 0.4);
        $('#third').parallax("50%", 0.3);
})

Add the includes below to your web page

<link href="parallax.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.solodev.com/assets/parallax/jquery.localscroll-1.2.7-min.js"></script>
<script src="https://www.solodev.com/assets/parallax/jquery.parallax-1.1.3.js"></script>
<script src="https://www.solodev.com/assets/parallax/jquery.scrollTo-1.4.2-min.js"></script>
<script src="scrolling.js"></script>

Demo on JSFiddle Download from GitHub

With the Solodev Website Builder, it's faster and easier to design, build, and launch beautifully crafted websites than ever before.

Learn More

Using Parallax with Multiple Backgrounds

Step 1 - parallax.html

Step 2 - parallax.css

Step 3 - scrolling.js

Add the includes below to your web page

Product

Solutions

Resources

About

Thank you for subscribing!

Features

Solutions

Resources

About