mathiaspl20

gradient.js

Oct 24th, 2016
128
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var colors = new Array(
  2.   [62,35,255],
  3.   [60,255,60],
  4.   [255,35,98],
  5.   [45,175,230],
  6.   [255,0,255],
  7.   [255,128,0]);
  8.  
  9. var step = 0;
  10. //color table indices for:
  11. // current color left
  12. // next color left
  13. // current color right
  14. // next color right
  15. var colorIndices = [0,1,2,3];
  16.  
  17. //transition speed
  18. var gradientSpeed = 0.002;
  19.  
  20. function updateGradient()
  21. {
  22.  
  23.   if ( $===undefined ) return;
  24.  
  25. var c0_0 = colors[colorIndices[0]];
  26. var c0_1 = colors[colorIndices[1]];
  27. var c1_0 = colors[colorIndices[2]];
  28. var c1_1 = colors[colorIndices[3]];
  29.  
  30. var istep = 1 - step;
  31. var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
  32. var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
  33. var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
  34. var color1 = "rgb("+r1+","+g1+","+b1+")";
  35.  
  36. var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
  37. var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
  38. var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
  39. var color2 = "rgb("+r2+","+g2+","+b2+")";
  40.  
  41.  $('#hero').css({
  42.    background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
  43.     background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  44.  
  45.   step += gradientSpeed;
  46.   if ( step >= 1 )
  47.   {
  48.     step %= 1;
  49.     colorIndices[0] = colorIndices[1];
  50.     colorIndices[2] = colorIndices[3];
  51.    
  52.     //pick two new target color indices
  53.     //do not pick the same as the current one
  54.     colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
  55.     colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
  56.    
  57.   }
  58. }
  59.  
  60. setInterval(updateGradient,10);
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×