How to Create Auto Moving Backgrounds In Pure JavaScript | slizer.js


Moving Background Image – slizer.js is a light-weight JavaScript plugin to robotically scroll the background picture of a container similar to a carousel. Great for panoramic backgrounds.

javascript background animation effects, background image moving animation css, animated website background with html5, css background animation effects

How to make use of it

Load the slizer.js script within the doc.

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

Add a background picture to your container.

<div id="example"></div>
#example {
  background-image:  url("panorama.jpg");

Attach the Slizer to the background picture.

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

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

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

Set the velocity of scrolling.

const slized = new Slizer(object, 
      RoundInterval : 100,
      PixelPerRound : 1

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

  • backgroundRepeat: reapeat
  • backgroundAttachment: fixed
  • backgroundPosition: 0 0
const slized = new Slizer(object, );

Create Animated Background | How to Make a Moving Background | Moving Background Image Javascript | slizer.js Github, moving background image css, animated background for website

See Demo And Download

Official Website(mahmoudJordan): Click Here

This superior jQuery plugin is developed by mahmoudJordan. For extra Advanced Usages, please go to the official website.