Random Background Color Fader with jQuery and jQuery UI
File Size: | 2.17 KB |
---|---|
Views Total: | 1569 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A minimalist jQuery & jQuery UI script used to randomly and smoothly change the background color of your web page.
How to use it:
1. Include the latest version of jQuery and jQuery UI in your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
2. Set the initial background color for your web page.
body { background-color:rgb(192,192,192); }
3. The JavaScript to generate random RGB colors and animate them at a certain speed.
$(document).ready(function randomColor(){ var num1 = 1 + Math.floor(Math.random() * 255); var num2 = 1 + Math.floor(Math.random() * 255); var num3 = 1 + Math.floor(Math.random() * 255); $("body").animate({"background-color":"rgb("+num1+","+num2+","+num3+")"}, 5000); setTimeout(randomColor, 5000); });
This awesome jQuery plugin is developed by legendss. For more Advanced Usages, please check the demo page or visit the official website.