jQuery Plugin To Create Smooth Color Transitions On Scroll - colorizer

File Size: 3.41 KB
Views Total: 793
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Smooth Color Transitions On Scroll - colorizer

colorizer is a super simple jQuery plugin that adds a smooth background-color transition effect to a specific container when the user scrolls down the webpage.

How to use it:

1. Just include the jQuery colorizer plugin after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-colorizer.js"></script>

2. Call the function on the container element where you want to apply the background-color transition effect.

$('body').colorizer();

3. Config the color transition effect with the following options.

$('body').colorizer({

  // array of colors you want to transition between
  colors: [[0, 0, 0], [225, 225, 225]],

  // apply the transition effect to background color
  cssrule: 'background-color',

  // current color
  currentColor: [0,0,0],

  // speed of change
  step: 10,

  // target container
  target: this
  
});

This awesome jQuery plugin is developed by Wizarysan. For more Advanced Usages, please check the demo page or visit the official website.