A Web Page Change Multi Background Color On Mouse Scroll – jquery-scrollie

A Free jQuery Plugin with Scrollie.js is a easy and lightweight jQuery page scroll plugin, that will permit you to call your own capacity when a component comes into see. This module will possibly disclose to you when your component is in view and let you run whatever liveliness you can think of.

How to used :

Add and place the JavaScript file jquery.scrollie.js after jQuery library.

Here we are adding Java Scripted files into the existing code.

<script src="jquery-1.12.4.min.js"></script>
<script src="jquery.scrollie.js"></script>

Call the function on the container element you want to keep track of the scroll events.

Here we called a function of an element to track the scrolling event.

$(function(){

  $('.element').scrollie();

});

Possible options to customize the plugin.

direction: The default value of direction is both (up & down). Direction Property will set the direction for the scroll callback function activation. Direction can put it to both. up or down.
scrollOffset: The default value is 0, and the distance from below the window that the scroll callback function activation.
ScrollRatio: The default value is 2, and this property will be a ration setting that you can use to move an element, set to 1 to move 1px for every pixel scrolled.

$('.element').scrollie({

  // the scrolling element to watch for scrolling action
  parentElement : window, 

  // 'up', 'down'
  direction : "both", 

  // in pixels
  scrollOffset : 0, 
  scrollRatio  : 2

});

Done