رفتن به مطلب

sohil79

پست های پیشنهاد شده

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

 

و اما آموزش :

در ابتدا باید عرض کنم این آموزش بر مبنای 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 را تغییر دهید .

 

دریافت فایل آماده این آموزش

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...