Background Image Parallax Animation In Vanilla JavaScript – bg-parallax

Category: Animation , Javascript | July 9, 2017
Author: dreamorosi
Views Total: 3,299
Official Page: Go to website
Last Update: July 9, 2017
License: MIT

Preview:

Background Image Parallax Animation In Vanilla JavaScript – bg-parallax

Description:

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')

You Might Be Interested In:


Leave a Reply