Create Auto Moving Backgrounds In Pure JavaScript – slizer.js

Category: Javascript | April 12, 2019
Author: mahmoudJordan
Views Total: 216
Official Page: Go to website
Last Update: April 12, 2019
License: MIT

Preview:

Create Auto Moving Backgrounds In Pure JavaScript – slizer.js

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
});

You Might Be Interested In:


Leave a Reply