Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
ساخت افکت رنگی با جاوا اسکریپت (Javascript)
در این مطلب می خواهیم نحوه ایجاد افکت های رنگی زیبا و در عین حال سبک و کم حجم را با برنامه نویسی به زبان جاوا اسکریپت آموزش دهیم، افکت هایی که به صورت محو و آشکار شدن رنگ و معمولا تحت عنوان Fade یا (fadein و fadeout) شناخته می شوند و بین کاربران محبوبیت زیادی نیز دارند، چرا که جلوه ی خاصی به سایت یا وبلاگشان می دهد، البته برخی نیز ترجیح می دهند از توابع موجود در کتابخانه های جاوا اسکریپتی (مثل جی کئوری jQuery و موارد مشابه) بدین منظور استفاده کنند که این کار لااقل برای مخاطبان با سرعت و کیفیت اینترنت پائین یک عیب عمده محسوب می شود، از طرفی وقتی می توانیم در منابع وب صرفه جویی کنیم و صفحاتی با حداقل حجم داشته باشیم، لزومی ندارد رو به فایل ها و روش های حجیم تر بیاوریم،

توابع ایجاد افکت رنگی در جاوا اسکریپت
قبل از هر چیز به چند تابع در بستر زبان جاوا اسکریپت (Javascript) نیازمندیم که بتواند کار ایجاد افکت های رنگی را برایمان انجام دهند، در زیر سه تابع برای این مورد در نظر گرفته ایم که ملاحظه می کنید.

<script type="text/javascript">
// تابع اصلی برای ایجاد افکت محو و آشکار شدن
function colorfader(id,element,start,end,steps,speed){
    var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
    var target = document.getElementById(id);
    steps = steps || 20;
    speed = speed || 20;
    clearInterval(target.timer);
    endrgb = colorconvert(end);
    er = endrgb[0];
    eg = endrgb[1];
    eb = endrgb[2];
    if(!target.r){
        startrgb = colorconvert(start);
        r = startrgb[0];
        g = startrgb[1];
        b = startrgb[2];
        target.r = r;
        target.g = g;
        target.b = b;
        }
    rint = Math.round(Math.abs(target.r-er)/steps);
    gint = Math.round(Math.abs(target.g-eg)/steps);
    bint = Math.round(Math.abs(target.b-eb)/steps);
    if(rint == 0) { rint = 1 }
    if(gint == 0) { gint = 1 }
    if(bint == 0) { bint = 1 }
    target.step = 1;
    target.timer = setInterval(function(){ coloranimation(id,element,steps,er,eg,eb,rint,gint,bint)}, speed);
}
//تابع تبدیل یک رنگ به رنگ دیگر
function coloranimation(id,element,steps,er,eg,eb,rint,gint,bint){
    var target = document.getElementById(id);
    var color;
    if(target.step <= steps){
        var r = target.r;
        var g = target.g;
        var b = target.b;
    if(r >= er){
        r = r - rint;
    }else{
        r = parseInt(r) + parseInt(rint);
    }
    if(g >= eg){
        g = g - gint;
    }else{
        g = parseInt(g) + parseInt(gint);
    }
    if(b >= eb){
        b = b - bint;
    }else{
        b = parseInt(b) + parseInt(bint);
    }
    color = rgb( + r + , + g + , + b + );
    if(element == background){
        target.style.backgroundColor = color;
    }else if(element == border){
        target.style.borderColor = color;
    }else{
        target.style.color = color;
    }
    target.r = r;
    target.g = g;
    target.b = b;
    target.step = target.step + 1;
  }else{
      clearInterval(target.timer);
      color = rgb( + er + , + eg + , + eb + );
    if(element == background){
        target.style.backgroundColor = color;
    } else if(element == border){
        target.style.borderColor = color;
    } else {
        target.style.color = color;
    }
  }
}
//تبدیل رنگ هگز به صورت rgb
function colorconvert(color) {
  var rgb = [parseInt(color.substring(0,2),16),
    parseInt(color.substring(2,4),16),
    parseInt(color.substring(4,6),16)];
  return rgb;
}
</script>

توضیح:
هر چند توضیح کامل آنچه در این توابع اتفاق می افتد تا نهایتا افکتی زیبا داشته باشیم در یک مطلب نمی گنجد و قسمت به قسمت نیاز به آموزش است، اما بد نیست وقتی می خواهیم از کدی استفاده کنیم، با نوع برنامه نویسی آن نیز بیشتر آشنا شویم، به همین دلیل به طور مختصر به عناصر به کار رفته شده در توابع بالا و کاربرد آنها اشاره می کنیم.
- تابع اصلی کد ما، colorfader نام دارد که چندین مقدار به عنوان آرگومان (آرگومان به معنی مقادیری که به تابع به عنوان ورودی می دهیم) می پذیرد؛ این تابع در واقع با دریافت اطلاعاتی که ما در هنگام فراخوانی آن تنظیم می کنیم، با استفاده از دو تابع دیگر با نام های coloranimation و colorconvert باعث خلق افکت های رنگی و اعمال آن روی عناصر صفحه می شود.
- دستور document.getElementById در واقع آی دی تنظیم شده بلاک div، در هنگام فراخوانی تابع colorfader را در خود نگه می دارد و به متغیر target نسبت می دهد، تا در ادامه روند کار تابع، پردازش و تغییرات روی آن اعمال شود.
- در قسمت steps و speed، گام ها (تعداد فریم ها) و سرعت افکت محو و آشکار شدن تنظیم می شود.
- قسمت مربوط به clearInterval و setInterval به همراه timer، در واقع تنظیم کننده یک ماشین زمان سنج برای تابع جاوا اسکریپت هستند، با setInterval یک زمان شروع می شود و با  clearInterval آن زمان متوقف می گردد.
- برای ایجاد افکت های رنگی، از مقادیر rgb (سه رنگ red green blue) در این تابع استفاده شده است.
- از قسمت Math.round و Math.abs برای ایجاد کدهای اتفاقی جهت ساخت رنگ های rgb استفاده می شود.
- قسمت مربوط به parseInt یک مقدار رشته ای (متنی) را دریافت می کند و در عوض یک عدد صحیح برمی گرداند.
- خروجی توابع به صورت دستورات target.style.backgroundColor، target.style.borderColor و target.style.color عمل می کنند، که با توجه به element تنظیم شده هنگام فراخوانی تابع، یکی از مقادیر border، background یا color قابل اعمال است (یعنی بر روی بلاک یا متن مورد نظر، یکی از موارد گفته شده با اجرای تابع، تغییر می کند).
- قسمت مربوط به substring با تجزیه مقادیر، کدهای خاصی برای مقادیر رنگی به صورت rgb تعریف می کند که در تابع colorfader مورد استفاده قرار می گیرد.

فراخوانی توابع و ایجاد افکت


همان طور که گفتیم، کدی که در بالا قرار داده ایم می تواند بر روی سه حالت یک عنصر در صفحه تاثیر گذار باشد (البته اگر کمی با جاوا اسکریپت آشنایی داشته باشید، در صورت نیاز موارد دیگری نیز قابل افزودن است)، رنگ پس زمینه (backgroundColor)، رنگ خطوط حاشیه ای (border) و رنگ متن و لینک و...(color)؛ بدین منظور نیز از تگ style در جاوا اسکریپت استفاده می کنیم که باعث می شود یک ویژگی به عنوان استایل css به یک عنصر در صفحه اعمال شود، در زیر به چهار حالت مختلف توابع را تنظیم و فراخوانی کرده ایم.

تغییر خودکار رنگ پس زمینه

 

<div id="example-1" onmouseover="colorfader(example-1,background,ffffff,d8e6ee)" onmouseout="colorfader(example-1,background,d8e6ee,ffffff,25,50)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>

در اینجا از رویداد onmouseover و onmouseout و بلاکی با آی دی فرضی example-1 برای فراخوانی خودکار تابع استفاده کرده ایم، در این حالت با بردن ماوس روی بلاک، تابع اجرا می شود و با خارج کردن ماوس، تابع مجدد اجرا شده ولی رنگ ها به حالت اولیه برمی گردند، ملاحظه می کنید که ویژگی background در آرگومان تابع تنظیم شده است.

تغییر رنگ پس زمینه با کلیک کاربر

 

<div id="example-2">
<a href="#" onclick="colorfader(example-2,background,ffffff,e4cdcd,50,15);">با کلیک بر روی لینک، افکت در بلاک example-2 اجرا می شود</a> [<a href="#" onclick="colorfader(example-2,background,e4cdcd,ffffff,50,15);">حالت پیش فرض</a>]
<br />
بعد از کلیک، رنگ این بلاک تغییر می کند.
</div>

این بار به جای استفاده از رویداد onmouseover و onmouseout، کنترل اجرای تابع را به دست کاربر داده ایم تا هنگامی که بر روی لینک کلیک کرد، تابع جاوا اسکریپتی ما فراخوانی شده و رنگ پس زمینه بلاک (این بار با آی دی فرضی example-2) تغییر نماید.

تغییر رنگ متن با کلیک کاربر

 

<div id="example-3">
<a href="#" onclick="colorfader(example-3,text,000000,cccccc,50,15);">با کلیک بر روی لینک، افکت در بلاک example-3 اجرا می شود</a> [<a href="#" onclick="colorfader(example-3,text,cccccc,000000,50,15);">حالت پیش فرض</a>]
<br />
بعد از کلیک، رنگ این متن تغییر می کند.
</div>

در این مثال، با کلیک کاربر عنصر text را به عنوان آرگومان دوم تابع ارسال می کنیم، با این کار مقادیر target.style.color اجرا شده و تاثیر تغییر رنگ بر روی متن بلاک ظاهر می گردد.

تغییر رنگ خط حاشیه به صورت خودکار

 

<div id="example-4" onmouseover="colorfader(example-4,border,000000,d8e6ee,25,30)" onmouseout="colorfader(example-4,border,d8e6ee,000000,25,30)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>

در این حالت فراخوانی تابع، از ویژگی border به عنوان آرگومان و رویداد onmouseover و onmouseout استفاده کرده ایم، در این حالت وقتی کاربر ماوس را روی بلاک مورد نظر می برد، رنگ حاشیه یا border بر اساس مقادیر تنظیمی تغییر می کند و با خارج کردن ماوس، مقادیر رویداد onmouseout اجرا شده و رنگ ها به حالت اولیه بازگشت می کنند.

کد و پیش نمایش آنلاین


در زیر کد کامل تابع و پیش نمایشی از آن را به صورت آنلاین می توانید ملاحظه و بررسی کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | افکت های رنگی با جاوا اسکریپت</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
a{
    text-decoration:none;
    color:#06C;
}
a:hover{
    color:#999;
}
#example-1{
    display:block;
    height:50px;
    width:auto;
    border:1px solid #666;
    padding:4px;
}
#example-2{
    display:block;
    height:50px;
    width:auto;
    border:1px solid #666;
    padding:4px;    
}
#example-3{
    display:block;
    height:50px;
    width:auto;
    border:1px solid #666;
    padding:4px;    
}
#example-4{
    display:block;
    height:50px;
    width:auto;
    border:1px solid #666;
    padding:4px;    
}
</style>
<script type="text/javascript" src="colorfader.js"></script>
</head>
<body>
<div id="example-1" onmouseover="colorfader(example-1,background,ffffff,d8e6ee)" onmouseout="colorfader(example-1,background,d8e6ee,ffffff,25,50)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>
<br />
<div id="example-2">
<a href="#" onclick="colorfader(example-2,background,ffffff,e4cdcd,50,15);">با کلیک بر روی لینک، افکت در بلاک example-2 اجرا می شود</a> [<a href="#" onclick="colorfader(example-2,background,e4cdcd,ffffff,50,15);">حالت پیش فرض</a>]
<br />
بعد از کلیک، رنگ این بلاک تغییر می کند.
</div>
<br />
<div id="example-3">
<a href="#" onclick="colorfader(example-3,text,000000,cccccc,50,15);">با کلیک بر روی لینک، افکت در بلاک example-3 اجرا می شود</a> [<a href="#" onclick="colorfader(example-3,text,cccccc,000000,50,15);">حالت پیش فرض</a>]
<br />
بعد از کلیک، رنگ این متن تغییر می کند.
</div>
<br />
<div id="example-4" onmouseover="colorfader(example-4,border,000000,d8e6ee,25,30)" onmouseout="colorfader(example-4,border,d8e6ee,000000,25,30)">برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید.</div>
</body>
</html>


1394/05/30 10:10:21 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما