jQuery Parallax Scrolling Background Image

SnakeParallax.js dirt simple jQuery plugin to create parallax scrolling background image. No coding skills required to implement it on any type of website.

The plugin handles all the styles directly from Javascript file. You don’t need to do anything but just call the image URL in the Javascript function and you are done.

It is a dead-easy and responsive library which allow you to add image URL in the configuration option then snake.js will do everything.

In addition, this jQuery plugin doesn’t require any additional style to make it work. It dynamically adds all necessary styles by its own.

No matter if you are a beginner or an expert developer, integrating the parallax scrolling effect is easy. From the monitor to the smallest smartphone devices, Snake Parallax adapts to the size of your device.

How to Make jQuery Parallax Scrolling Background Image

First of all, load jQuery library and Snake Parallax plugin into your HTML document to get started.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Snake Parallax JS -->
<script src="js/Snake.Parallax.js"></script>

Add additional stylesheet if you want to implement nice-looking hero effect just like the demo.

<link rel="stylesheet" href="css/style.css">

After that, simply create a section with attribute snake-parallax="hero" and add your contents in it.

<section snake-parallax="hero">
  ADD YOUR CONTENT INCLUDING HTML ELEMENTS HERE....
</section>

However, if you want to make a hero section just like the demo you can add the following HTML code.

<div class="hero-section" snake-parallax="hero">
  <div class="hero-wrapper">
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1 class="hero-title">Snake Parallax</h1>
      <p class="hero-subtitle">A jquery plugin that creates a simple, clean, and powerfull parallax effect.</p>
      <div class="hero-btns">
        <div class="btn">
          <a href="#" class="snake-prim">Download Snake.Parallax.js</a>
        </div>
        <div class="btn">
          <a href="#" class="snake-sec">Github</a>
        </div>
      </div>
    </div>
  </div>
</div>

Finally, its time to initialize the plugin. Call the plugin globally with document (or window) selector.
Insert your background image URL in url('IMAGE_URL_GOES_HERE') option.

<script>
      $(document, window).SnakeParallax({
        backgroundPosition:"center top",
        backgroundImage:"url('IMAGE_URL_GOES_HERE')"
      });
</script>

That’s It.