نحوه ایجاد افکت های رنگی زیبا و در عین حال سبک و کم حجم را با برنامه نویسی به زبان جاوا اسکریپت
افکت هایی که به صورت محو و آشکار شدن رنگ و معمولا تحت عنوان Fade یا (fadein و fadeout) شناخته میشن و بین کاربران محبوبیت زیادی نیز دارند.
توابع ایجاد افکت رنگی در جاوا اسکریپت
قبل از هر چیز به چند تابع در بستر زبان جاوا اسکریپت (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 مورد استفاده قرار می گیرد.