Advertisement
kawaiibuu

Custom Gradient Background

Dec 9th, 2014
753
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.37 KB | None | 0 0
  1. Copy and paste this AFTER your <head> tag
  2. <meta name="color:gradient 1" content="#fdb0a6"/>
  3. <meta name="color:gradient 2" content="#ff7f7a"/>
  4. <meta name="color:gradient 3" content="#fdb0a6"/>
  5. <meta name="color:gradient 4" content="#cdb5cd"/>
  6. <meta name="color:gradient 5" content="#98d2f7"/>
  7. <meta name="color:gradient 6" content="#8fd6ac"/>
  8.  
  9. Copy and paste this AFTER <style> or <style type="text/css">
  10. #gradient_bg { z-index: -1000; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; background-size: cover; position:fixed; padding: 0px; margin: 0px; }
  11.  
  12. Copy and paste this AFTER <body>
  13. <div id="gradient_bg"></div>
  14.  
  15. Then scroll to the BOTTOM OF THE PAGE and paste this BEFORE </body>
  16. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  17. <script>
  18. var colors = new Array(
  19. [{RGBcolor:gradient 1}],
  20. [{RGBcolor:gradient 2}],
  21. [{RGBcolor:gradient 3}],
  22. [{RGBcolor:gradient 4}],
  23. [{RGBcolor:gradient 5}],
  24. [{RGBcolor:gradient 6}]);
  25. var step = 0;
  26. var colorIndices = [0,1,2,3];
  27. var gradientSpeed = 0.002;
  28. function updateGradient()
  29. {
  30. var c0_0 = colors[colorIndices[0]];
  31. var c0_1 = colors[colorIndices[1]];
  32. var c1_0 = colors[colorIndices[2]];
  33. var c1_1 = colors[colorIndices[3]];
  34. var istep = 1 - step;
  35. var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
  36. var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
  37. var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
  38. var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);
  39. var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
  40. var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
  41. var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
  42. var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16);
  43. $('#gradient_bg').css({
  44.  
  45. background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
  46. background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  47. step += gradientSpeed;
  48. if ( step >= 1 )
  49. {
  50. step %= 1;
  51. colorIndices[0] = colorIndices[1];
  52. colorIndices[2] = colorIndices[3];
  53. colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
  54. colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
  55. }
  56. }
  57. setInterval(updateGradient,10);
  58. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement