Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Using Parallax with Multiple Backgrounds

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

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.

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>
</div>
<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>
  </div>
</div>
<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>
</div>

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>

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev