Create An Animated Radial Gradient Background With jQuery and CSS3
File Size: | 1.8 KB |
---|---|
Views Total: | 14369 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight jQuery script that creates an animated radial gradient background from an array of pre-defined colors.
See Also:
How to use it:
1. Include the latest version of jQuery library in the head section of your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2. Create two container elements for the animated gradient background.
<div id="gradient2"></div> <div id="gradient"></div>
3. The CSS/CSS3 to set the initial gradient background.
#gradient { position: absolute; width: 100%; height: 100%; padding: 0px; margin: 0px; z-index: 10; } #gradient2 { position: absolute; width: 100%; height: 100%; padding: 0px; margin: 0px; z-index: 3; background-image: -webkit-radial-gradient(80% 10%, circle, rgb(27,186,135), transparent), -webkit-radial-gradient(80% 50%, circle, rgb(58,164,178), transparent), -webkit-radial-gradient(20% 80%, 40em 40em, rgb(14,4,56), transparent), -webkit-radial-gradient(10% 10%, circle, rgb(68,242,215), transparent); }
4. The Javascript to enable the animated gradient background.
<script> $( document ).ready(function() { var colors = new Array( [230,105,147], [58,164,178], [40,26,88], [232,24,122]); var step = 0; //color table indices for: // current color left // next color left // current color right // next color right var colorIndices = [0,1,2,3]; //transition speed var gradientSpeed = 0.002; function updateGradient() { var c0_0 = colors[colorIndices[0]]; var c0_1 = colors[colorIndices[1]]; var c1_0 = colors[colorIndices[2]]; var c1_1 = colors[colorIndices[3]]; var istep = 1 - step; var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]); var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]); var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]); var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16); var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]); var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]); var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]); var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16); $('#gradient').css({background: "-webkit-radial-gradient(80% 10%, circle, "+color1+", transparent), -webkit-radial-gradient(80% 50%, circle, "+color2+", transparent)"}); step += gradientSpeed; if ( step >= 1 ) { step %= 1; colorIndices[0] = colorIndices[1]; colorIndices[2] = colorIndices[3]; //pick two new target color indices //do not pick the same as the current one colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; } } setInterval(updateGradient,10); }); </script>
This awesome jQuery plugin is developed by zacharyhickson. For more Advanced Usages, please check the demo page or visit the official website.