Minimal Background Image Parallax Effect In jQuery - Snake Parallax

Snake Parallax is a lightweight (less than 1kb) jQuery Parallax plugin that automatically adds a parallax scrolling background image to the hero section in your landing page. Fully responsive and mobile compatible.

How to use it:

1. To use the plugn, insert the Snake.Parallax.js script after loading the latest jQuery JavaScript library.

<script src="/path/to/jquery.min.js"></script>
<script src="js/Snake.Parallax.js"></script>

2. Add the snake-parallax="hero" attribute to the hero section within the document.

<div class="hero-section" snake-parallax="hero">
  <div class="hero-wrapper">
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1 class="hero-title">Landing Page</h1>
      <p class="hero-subtitle">Description here</p>
      <div class="hero-btns">
        <div class="btn">
          <a href="#">Action Button</a>
        </div>
      </div>
    </div>
  </div>
</div>

3. Insert a background images into the hero section and apply the parallax scrolling effect to the image on page scroll.

$(document, window).SnakeParallax({
  backgroundImage:"url('bg.jpg')"
});

4. Adjust the position of the background image. Default: 'center top'.

$(document, window).SnakeParallax({
  backgroundImage:"url('bg.jpg')",
  backgroundPosition:"center center"
});

---

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