Creating Animated Background with Random Gradient Transitions using jQuery
File Size: | 1.47 KB |
---|---|
Views Total: | 9655 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

In this post we're going to create a modern animated background with random gradient transitions built with CSS3 and Javascript (jQuery).
See also:
- Create An Animated Radial Gradient Background With jQuery and CSS3
- jQuery Plugin For Multi-layered Gradient Background with CSS3 - Shards
- Gradient Color Background Plugin For jQuery - Add Shine
How to use it:
1. Create two DIV containers for the animation background.
<div class="bg"></div> <div class="bg hidden"></div>
2. The CSS/CSS3 styles.
html, body { margin: 0; height: 100%; position: relative; } .bg { position: absolute; width: 100%; height: 100%; -webkit-transition: opacity 5s; -moz-transition: opacity 5s; transition: opacity 5s; } .hidden { opacity: 0; }
3. Include the jQuery library at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
4. The core Javascript to create random gradient transitions.
function newGradient() { var c1 = { r: Math.floor(Math.random()*255), g: Math.floor(Math.random()*255), b: Math.floor(Math.random()*255) }; var c2 = { r: Math.floor(Math.random()*255), g: Math.floor(Math.random()*255), b: Math.floor(Math.random()*255) }; c1.rgb = 'rgb('+c1.r+','+c1.g+','+c1.b+')'; c2.rgb = 'rgb('+c2.r+','+c2.g+','+c2.b+')'; return 'radial-gradient(at top left, '+c1.rgb+', '+c2.rgb+')'; } function rollBg() { $('.bg.hidden').css('background', newGradient()); $('.bg').toggleClass('hidden'); }
5. Call the plugin and set the interval for the transitions.
$(document).ready(function() { rollBg(); setInterval(rollBg, 5000); });
This awesome jQuery plugin is developed by MarcMalignan. For more Advanced Usages, please check the demo page or visit the official website.