آموزش پس زمینه متحرک به صورت Gradient

در این پست از وب سایت اسکریپت دات کام قصد آموزش ایجاد یک بک گراند متحرک به صورت Gradient را دارم که امیدوارم مورد استفاده شما عزیزان قرار گیرد .

گرادینت به معنای شیب یا سطح شیب دار است، در دنیای گرافیک به تصویری که ازطیف رنگ های مختلف به صورت شیب دار ایجاد می شوند و مرز مشخصی بین رنگ ها نباشد را گرادینت می گویند (این شیب ها می توانند عمودی، افقی ، مورب ، مدوّر و … باشند )

و اما آموزش :

در ابتدا باید عرض کنم این آموزش بر مبنای Jquery می باشد . پس شما حتما باید در وب سایت خود از کتابخانه جی کوئری استفاده نمایید .

حال کافیست کد های اسکریپتی زیر را به انتهای وب سایت خود اضافه نمایید :

<script>
var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
var colorIndices = [0,1,2,3];
var gradientSpeed = 0.002;

function updateGradient()
{
  
  if ( $===undefined ) return;
  
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 vms = 1 - step;
var r1 = Math.round(vms * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(vms * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(vms * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(vms * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(vms * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(vms * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('body').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}).css({
    background: "-ms-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}).css({
    background: "linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}).css({
    background: "-o-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"})
  
  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    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,1);
</script>

نکته 1 : برای تغییر رنگ ها به صورت RGB میتوانید اعدادی از 0 تا 255 در مقادیر آرایه colors وارد نمایید .

نکته 2 : برای افزایش یا کاهش سرعت میتوانید مقدار متغییر gradientSpeed را تغییر دهید .

دموی اسکریپت

دانلود فایل دموی اسکریپت

گرداوری و آموزش : وحید مجیدی

پخش اختصاصی