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

و اما آموزش :

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

دموی اسکریپت

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

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

پخش اختصاصی

البته در این شکی نیست که اگر کسی حرفه ای باشد , باز هم با توجه به بستن این امکان توسط ما , باز هم میتواند به آن دسترسی داشته باشد .

بیشتر هدف من از این پست , جلوگیری از اجرای inspect Element در افراد معمولی و بازدیدکنندگان غیر حرفه ای وب سایت نیز می باشد .

برای این کار کافیست ما از اجرای کلیک راست , کلید F12 , کلید های ترکیبی Ctrl+shift+i و کلید های ترکیبی Ctrl+shift+c در مرورگر ها جلوگیری کنید .

پس شما میتوانید با کپی کد های Jquery زیر در قالب خود , این عملیات را به راحتی انجام دهید .

<script>
$(document).keydown(function(vms1){
    if(vms1.keyCode==123){
    return false;
   }
   if(vms1.ctrlKey && event.shiftKey && event.keyCode==73){        
      return false;
   }
   if(vms1.ctrlKey && event.shiftKey && event.keyCode==67){        
      return false;
   }
});
$(document).on("contextmenu",function(vms2){        
   vms2.preventDefault();
});
</script>

توجه :‌ کاملا مشخص است به دلیل کد نویسی Jquery بالا , شما باید قبل از درج کد بالا در وب سایت خود , از کتابخانه Jquery استفاده نموده باشید . دانلود از Jquery.com

پخش اختصاصی

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

این مدل لینک دهی در سایت wikipedia به وفور یافت میشود و به این معنا میباشد که شاید شما بخواهید کاربر پس از ورود به صفحه ی مورد نظر خود , به نقطه ای مشخص از آن صفحه برود . مثلا فرض کنید در یک تگ h1 در وب سایت خود دارید که میخواهید کاربر پس از کلیک بر روی لینک شما , به همان تگ h1 پرش کند . برای این کار باید مراحل زیر را انجام دهید .

اما این عمل سریعا انجام میشود که شما کاربران گرامی میتوانید با آموزشی که در ادامه قرار داده استفاده نمایید و این عمل را به آرامی و با اسکرول نرم انجام دهید

برای انجام اسکرول نرم کافیست کد زیر را در فایل html خود وارد نمایید . ( قبل از بسته شدن تگ <body/> مناسب تر میباشد .

نکته بسیار مهم : این کد به صورت جی کوئری می باشد . پس حتما باید کتابخانه جی کوئری بر روی وب سایت شما نصب باشد .

<script>
$(document).ready(function(e) {
	$("a[href*='#']").click(function(){
		$('html, body').animate({
			scrollTop: $( $.attr(this, 'href') ).offset().top
			}, 500);
		return false;
	});
});
</script>

توجه : شما میتوانید با تغییر عدد 800 در کد بالا , سرعت را کم یا زیاد نمایید و

دموی آماده کد

پخش اختصاصی

آموزش : وحید مجیدی