Responsive Parallax Effect For Hero Image - smooth-parallax.js

A lightweight (0.5kb) and responsive jQuery parallax plugin which applies fade out and smooth parallax scrolling effects to the background image of the hero header section of your webpage.

How to use it:

1. Create a 'Hero' header on the webpage. Don't forget to replace the hero image with your owns.

<section name="hero" class="hero-section">
  <div class="hero-wrapper" style="background-image: url('bg.jpg')">
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1 class="hero-title">Title</h1>
      <p class="hero-subtitle">Description</p>
      <div class="hero-btns">
        Call To Action Buttons Here
      </div>
    </div>
  </div>
</section>

2. Load the necessary JavaScript and CSS files in the HTML document.

<script src="/path/to/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/jquery-smooth-parallax.css" />
<script src="/path/to/jquery-smooth-parallax.js"></script>

3. Activate the smooth parallax scrolling effect on the background image. That's it.

$(window).SmoothParallax();

---

This awesome jQuery plugin is developed by Najdaoui. For more Advanced Usages, please check the demo page or visit the official website.