This time I will share jQuery Plugin and tutorial about Scroll-triggered Color Transition Effect With jQuery, hope it will help you in programming stack.
Scrolling Background Color is a really small jQuery plugin which makes use of jQuery color.js library to apply a smooth color transition effect to background when you scroll down the webpage.
How to use it:
1. Load the needed jQuery and jQuery color.js plugin in the html page.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="jquery.color.min.js"></script> |
2. Call the function to initialize the plugin with default options.
1 |
// for the entire page background |
2 |
$(window).scrollingBackgroundColor(); |
4 |
// for the background of #element |
5 |
$('#element').scrollingBackgroundColor(); |
3. Specify the start/end colors you want to transition between.
1 |
$("#element").scrollingBackgroundColor( { |
4. Set the target and watch elements.
1 |
$("#element").scrollingBackgroundColor( { |
This awesome jQuery plugin is developed by moshifr. For more Advanced Usages, please check the demo page or visit the official website.
