Background Image Parallax Animation In Vanilla JavaScript – bg-parallax

bg-parallax is a native JavaScript plugin which applies a smooth, performant parallax scrolling animation to the background image using ‘window.requestAnimationFrame()‘ method.

How to use it:

Add a background image to the parallax container. You can specify the parallax animation speed using ‘data-speed’ as this:

<header class="parallax-panel" data-speed="5"></header>

header {
  height: 200px;
  background: url('bg') repeat-y;
  background-size: cover;
}

Download and insert the minified version of the bg-parallax into the html document.

<script src="bg-parallax.min.js"></script>

Initialize the bg-parallax and you’re done.

window.bgParallax('.parallax-panel')