Create Auto Moving Backgrounds In Pure JavaScript – slizer.js

Preview:

Description:

slizer.js is a lightweight JavaScript plugin to automatically scroll the background image of a container just like a carousel. Great for panoramic backgrounds.

How to use it:

Load the slizer.js script in the document.

<script src="Slizer.js"></script>

Add a background image to your container.

<div id="example"></div>

#example {
  background-image:  url("panorama.jpg");
}

Attach the Slizer to the background image. Done.

const object = document.getElementById("example");
const slized = new Slizer(object);

Set the direction of scrolling. Default: ‘h’ (horizontal).

const slized = new Slizer(object, {
      Direction : 'v'
});

Set the speed of scrolling.

const slized = new Slizer(object, {
      RoundInterval : 100,
      PixelPerRound : 1
});

Decide whether or not to use default background styles. Default: false.

• backgroundRepeat: reapeat
• backgroundAttachment: fixed
• backgroundPosition: 0 0

const slized = new Slizer(object, {
      ApplyDefaultStyle : true
});

Changelog:

08/09/2020

• Updated