للباحثين عن تأثير fade اسهل وافضل كود لفعل ذلك فى خطوة واحدة بأستخدام تقنيةfat

[ejasoft]

السلام عليكم ورحمة الله وبركاته

للباحثين عن تأثير ال 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");

واتمنى ان يفيدكم الكود ولاى استفسار انا فى خدمتكم
شكرا لكم

[ALMimoni]

بارك الله فيك
تأثير جميل جدا
يا ليت ترفق ملف HTML وفيه تأثيرين في نفس الوقت
لأني مش ولا بد في الجافا سكربت