Random Background Color Fader with jQuery and jQuery UI

File Size: 2.17 KB
Views Total: 1567
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Random Background Color Fader with jQuery and jQuery UI

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.