Using Parallax Scrolling with Background Images

A major trend in web design is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page.

A major trend in web design is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. This effect adds a subtle element of depth to the background images of your web pages. This article will show you how to add parallax scrolling to your images.

Below is the HTML, CSS, and JavaScript required to add Parallax Scrolling to your web pages.

Step 1 - Add the HTML below to where you'd like the Parallax scrolling to take effect

<header class="black-circle parallax" style="min-height: 979px;">
  <div class="inner">
    <div class="ct-page_title">
      <div class="inner">
        <h1><span><img src="https://www.solodev.com/core/fileparse.php/257/urlt/logo.png"/></span></h1>
        <h2>A major trend in web design is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page.</h2>
      </div>
    </div>
  </div>
</header>
<section id="section1" class="ct-u-paddingBoth120" style="min-height: 979px;">
  <div class="container">
    <div class="row">
      <div class="container text-center">
        <i class="fa fa-users"></i>
        <h2 class="ct-section_header ct-section_header--type1">Scrolling Parallax</h2>
        <p>Using parallax to create depth has become commonplace in modern design trends. You can create unique templates that present your website information with a specific design edge.</p>
        <a href="#" class="btn btn-large btn-motive ct-u-marginTop70">Use Solodev's Parallax Integration Today</a>
      </div>
    </div>
  </div>
</section>
<section id="section2" class="black-circle ct-u-paddingBoth120" style="min-height: 979px;">
  <div class="inner">
    <div class="ct-page_title">
      <div class="inner">
        <h1><span><img src="https://www.solodev.com/core/fileparse.php/257/urlt/logo.png"/></span></h1>
        <h2>This effect adds a subtle element of depth to the background images of your web pages.</h2>
      </div>
    </div>
  </div>
</section>

Step 2 - Add the CSS to the main stylesheet of your website

.black-circle {
  position: relative;
  display: table;
  width: 100%;
}
.inner {
  text-align: center;
  color: #fff;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.ct-page_title {
  height: 640px;
  display: inline-table;
  background: #222;
  border-radius: 50%;
  width: 640px;
}
.ct-page_title h1 {
  font-size: 75px;
  line-height: 1;
  font-family: 'coquette',fantasy;
  font-weight: 700;
}
.ct-page_title h2 {
  font-size: 34px;
  font-family: 'nimbus-sans-condensed',sans-serif;
  font-weight: 400;
  font-weight: 700;
  width: 85%;
  margin: 0 auto;
}
.ct-u-paddingBoth120 {
  padding-top: 120px;
  padding-bottom: 120px;
}
.ct-section_header--type1 {
  font-family: 'Bebas Neue';
  color: #000;
  font-size: 115px;
  text-transform: uppercase;
}
.ct-section_header + p {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-align: center;
}
.btn.btn-motive {
  background-color: #00bff3;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  padding: 20px 50px;
  font-size: 30px;
  white-space: normal;
  color: #fff;
  text-decoration: none;
  margin-top: 70px;
}
.fa {
  font-size: 42px;
  color: #fff;
  background-color: #00bff3;
  border-radius: 50%;
  padding: 12px;
}

Step 3 - Add the JavaScript below to the web page where you're image lives

$(document).ready(function() {
  $('header').parallax({
    imageSrc: 'https://www.solodev.com/assets/hero-slider/slide1.jpg'
  });

  $('#section2').parallax({
    imageSrc: 'https://www.solodev.com/assets/hero-slider/slide3.jpg'
  });
});

Step 4 - Add the includes below to the page where your Parallax Scrolling lives

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.3.1/parallax.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">

Download from Github

Share on Facebook Tweet It