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

How to Create a Parallax Hero Image

A Parallax Hero Image creates a depth and transition effect when scrolling down your web page and makes website navigation seamless.

A Parallax Hero Image creates a depth and transition effect when scrolling down to the main hero of your page to the content below. The following tutorial shows you how to add a parallax hero image to your website.

Below is the HTML, CSS, and JavaScript required.

Step 1 - hero.html

Add the HTML below to your web page

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<section class="hero">
  <h1>Parallax Hero Image</h1>
</section>
<section class="content">
  <section class="ct_icon_box_section">
    <div class="container">
      <div class="ct-section_header ct-section_header--type2">
        <h2>A World-Class Approach to Business</h2>
        <div class="ct-section_header-description">Companies are looking to do business with other great companies. WebCorpCo theme has what it takes to show the world you mean business.</div>
        <div class="clearfix"></div>
        <div class="ct-section_header-separator"></div>
      </div>
      <div class="row">
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-users"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Marketing</h3>
              <div class="ct-icon_box-content">
                Market to the right person, at the right time, at the place.
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-cogs"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Sales</h3>
              <div class="ct-icon_box-content">Improve sales through the use of Big Data and Analytics.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-clipboard"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Design</h3>
              <div class="ct-icon_box-content">Benefit from award winning mobile responsive design.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-globe"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Programming</h3>
              <div class="ct-icon_box-content">No need to program. WebCorpCo does all of the coding for you.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-user-plus"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Support</h3>
              <div class="ct-icon_box-content">We offer 24/7 365 global support for all enterprise customers.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-line-chart"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Training</h3>
              <div class="ct-icon_box-content">Benefit from webinars and training sessions offered regularly.</div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-users"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Marketing</h3>
              <div class="ct-icon_box-content">Market to the right person, at the right time, at the place.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-cogs"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Sales</h3>
              <div class="ct-icon_box-content">Improve sales through the use of Big Data and Analytics.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-clipboard"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Design</h3>
              <div class="ct-icon_box-content">Benefit from award winning mobile responsive design.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-globe"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Programming</h3>
              <div class="ct-icon_box-content">No need to program. WebCorpCo does all of the coding for you.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-user-plus"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Support</h3>
              <div class="ct-icon_box-content">We offer 24/7 365 global support for all enterprise customers.</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6">
          <div class="ct-icon_box media" onclick="location.href='#'">
            <div class="media-left">
              <i class="fa fa-line-chart"></i>
            </div>
            <div class="media-body">
              <h3 class="media-heading">Training</h3>
              <div class="ct-icon_box-content">Benefit from webinars and training sessions offered regularly.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</section>

Step 2 - hero.css

Download the CSS below and include it in your web page

hero.css

Step 3 - parallax-hero.js

Add the JavaScript below to a file called parallax-hero.js

$(document).ready(function(){
  $(window).scroll(function(e){
    parallax();
  });
  function parallax(){
    var scrolled = $(window).scrollTop();
    $('.hero').css('top',-(scrolled*0.0315)+'rem');
    $('.hero > h1').css('top',-(scrolled*-0.005)+'rem');
    $('.hero > h1').css('opacity',1-(scrolled*.00175));
  };
});

Add the includes below to your web page

<link href="hero.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="parallax-hero.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
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

Terms Privacy Policy Contact