السلام عليكم ورحمة الله وبركاته
للباحثين عن تأثير ال fade على الكائنات
نستخدم اليوم تقنية FAT (Fade Anything Technique )
وهي تقنية تستخدم لاضافة تأثير FADE على معظم الكائنات فى ال HTML
لتجربة مثال
http://www.axentric.com/aside/fat/
لاحظ الصفحة اثناء التحميل
تأثير ال fade على معظم الكلام المعروض
يمكنك الاستفادة من هذا التأثير على معظم اسكريبتاتك
ومن مميزاته انه يعمل بنظام الفيرم الذى يجعل التأثير مشابه لعمل الفلاش فى سرعة وجمال التأثير
طبعا حجم الكود لا يتعدى ال 2 كيلو
طريقة الاستخدام بسيطة جدا وهيا كالاتى
اضف الكود التالى اما فى ملف js خارجى او فى داخل الصفحة نفسها فى ال هيدر
كود:
// @name The Fade Anything Technique
// @namespace http://www.axentric.com/aside/fat/
// @version 1.0-RC1
// @author Adam Michela
var Fat = {
make_hex : function (r,g,b)
{
r = r.toString(16); if (r.length == 1) r = '0' + r;
g = g.toString(16); if (g.length == 1) g = '0' + g;
b = b.toString(16); if (b.length == 1) b = '0' + b;
return "#" + r + g + b;
},
fade_all : function ()
{
var a = document.getElementsByTagName("*");
for (var i = 0; i < a.length; i++)
{
var o = a[i];
var r = /fade-?(\w{3,6})?/.exec(o.className);
if (r)
{
if (!r[1]) r[1] = "";
if (o.id) Fat.fade_element(o.id,null,null,"#"+r[1]);
}
}
},
fade_element : function (id, fps, duration, from, to)
{
if (!fps) fps = 30;
if (!duration) duration = 3000;
if (!from || from=="#") from = "#FFFF33";
if (!to) to = this.get_bgcolor(id);
var frames = Math.round(fps * (duration / 1000));
var interval = duration / frames;
var delay = interval;
var frame = 0;
if (from.length < 7) from += from.substr(1,3);
if (to.length < 7) to += to.substr(1,3);
var rf = parseInt(from.substr(1,2),16);
var gf = parseInt(from.substr(3,2),16);
var bf = parseInt(from.substr(5,2),16);
var rt = parseInt(to.substr(1,2),16);
var gt = parseInt(to.substr(3,2),16);
var bt = parseInt(to.substr(5,2),16);
var r,g,b,h;
while (frame < frames)
{
r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
h = this.make_hex(r,g,b);
setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);
frame++;
delay = interval * frame;
}
setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);
},
set_bgcolor : function (id, c)
{
var o = document.getElementById(id);
o.style.backgroundColor = c;
},
get_bgcolor : function (id)
{
var o = document.getElementById(id);
while(o)
{
var c;
if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
if (o.currentStyle) c = o.currentStyle.backgroundColor;
if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
o = o.parentNode;
}
if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
return c;
}
}
قم بأزالة ال // من امام السطور التالية لاضافة تأثير الfade على كل الكائنات اللى معروضة
//window.onload = function ()
//{
// Fat.fade_all();
//}
وقم بتحديد الكائن المراد اضافة التأثير عليه من الكود ادناه
كود:
Fat.fade_element('Element_id','frams', 'time', "from", "to");
حيث
'Element_id' = id الكائن
ليكون مثلا
كود:
<div id="loading"></div>
frams = هوا عدد المراحل لتدرج التأثير من الى وذلك كلما ذاد كلما كان اجمل لاكنه ابدأ
المناسب ما بين 30 الى 60
time = هو الوقت لتنفيذ التأثير وهوا بالملى سكند
واخيرا
"from", "to"
هو لون الخلفية
وto هو اللون النهائى
عن عدم اضافتهم يصبح from
من الاصفر
to
لون خلفية الصفحة
كود:
Fat.fade_element('loading', 60, 500, "#c00", "#FFFFFF");
واتمنى ان يفيدكم الكود ولاى استفسار انا فى خدمتكم
شكرا لكم