افکت های رنگی می توانند محیط سایت شما را زیباتر کنند و جلوه ای خاص به آن به دهند. به همین دلیل در این مقاله می خواهیم نحوه ساخت افکت رنگی در جاوا اسکریپت را به شما آموزش دهیم. این افکت ها عموما به شکل fade یا محو و آشکار شدن مورد استفاده قرار می گیرند. برای ساخت افکت رنگی می توان از کتابخانه های آنلاین مانند jquery نیز استفاده کرد. اما استفاده از این روش ممکن است مشکلاتی را به همراه داشته باشد. افکت رنگی که توسط jquery ایجاد شود سنگین تر و حجیم تر خواهد بود و به خصوص در ایران که سرعت اینترنت خیلی بالا نیست می تواند مشکلاتی را برای کاربران ایجاد کند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
به همین دلیل ما ساخت افکت رنگی در جاوا اسکریپت را پیشنهاد می کنیم، زیرا در عین زیبایی سبک و کم حجم تر است. برای آموزش نحوه ساخت افکت رنگی در جاوا اسکریپت با ما همراه باشید.
آموزش پیشنهادی برای شما : آموزش جاوا اسکریپت از مقدماتی تا پیشرفته
توابع مورد نیاز برای ایجاد افکت رنگی در جاوا اسکریپت
اولین کار برای ساخت این افکت رنگی در جاوا اسکریپت، نوشتن چند تابع در بستر زبان جاوا اسکریپت است. در اینجا ما سه تابع را برای ایجاد این افکت ها در نظر گرفته ایم، تابع اصلی ایجاد افکت محو و آشکار شدن، تابع تبدیل یک رنگ به رنگ دیگر و در نهایت تابع رنگ به صورت محو.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<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 و colorconvort برای ایجاد افکت رنگی در جاوا اسکریپت استفاده می کند.
نحوه فراخوانی توابع و ایجاد افکت رنگی در جاوا اسکریپت
کد تابع اصلی ما در واقع می تواند سه حالت مختلف از عنصر color در صفحه را کنترل کند. برای این کار ما باید از تگ style در جاوا اسکریپت استفاده کنیم. این تگ سبب می شود که به یک عنصر در صفحه یک ویژگی را به صورت استایل css اعمال کنیم. حالا ما میخواهیم به چهار حالت مختلف توابع را تنظیم و فراخوانی کنیم . به مثال زیر دقت کنید:
کد های تغییر خودکار رنگ پس زمینه
|
1 2 3 |
<div id="example-1" onmouseover="colorfader('example-1','background','ffffff','d8e6ee')" onmouseout="colorfader('example-1','background','d8e6ee','ffffff',25,50)"> برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید. </div> |
تنظیم تغییر رنگ پس زمینه با کلیک کاربران
|
1 2 3 4 5 |
<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> |
تنظیم تغییر رنگ متن با کلیک کاربران
|
1 2 3 4 5 |
<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> |
حالت آخر تغییر رنگ حاشیه یا border به صورت خود کار
|
1 2 3 |
<div id="example-4" onmouseover="colorfader('example-4','border','000000','d8e6ee',25,30)" onmouseout="colorfader('example-4','border','d8e6ee','000000',25,30)"> برای دیدن عملکرد افکت، ماوس را بر روی این بلاک اندکی نگهدارید. </div> |
جمع بندی
ساخت افکت رنگی در جاوا اسکریپت کار خیل سختی نیست فقط دقت کنید که عناصر، آرگومان ها و توابع به درستی تنظیم شوند. برای دیدن نتیجه کار می توانید کد کامل تابع را در زیر مشاهده کنید. با اجرای این کد در مرورگر خود افکت های رنگی زیبایی خود را نشان خواهند داد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!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> <!-- https://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> |
منبع : طراحی سایت
