النتائج 1 إلى 5 من 5

الموضوع: طريقة لعمل حركة بسيطة ولكن مثيرة

  1. #1
    فضلاً اكتب اسمك الحقيقي هنا
    زائرسراب الليل

    طريقة لعمل حركة بسيطة ولكن مثيرة



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

    أعجبتني كثيراً حركة الرسالة التي تضهر عند تفعيل او إضافة أي شي في مدونة الوورد بريس

    التي مثل هكذا : ( طبعاً هنا كمثال جعلتها تتكرر لكن هي أساساً مره واحده وتقف )



    فأردت أن أقوم بعمل مثلها في أحد المشاريع التي أعمل عليها

    على ما أضن أنه تم عمل هذه الحركه من قبل فريق وورد بريس بإستخدام الجافاسكريبت او CSS

    لكن المشروع الذي أريد أن أضيف عليه هذه الحركة أو التأثير يعمل عليه عدة مبرمجين وفي المستقبل قد يأتي مبرمجين جدد فباستخدام الجافا سكربت بكثرة قد تزعج الكثير خاصة أنها ليست أساسية في النظام وتعتبر من الكماليات الجميلة

    وأيضاً من الجميل المحافظة على سهولة الأكواد ونظافتها من أكواد الإكسسوارات !

    لكن وجدت حركه بسيطه استخدمت فيها لعمل مثل هذا التأثير بسرعه وببساطه , واتمنى ان تعجبكم

    والفكره هي أن يتم عمل نقطه ( 1 بكسل ) صوره لون بتدرج اللون الآخر عن طريق الـ Image Ready وتكون الصوره غير متكررة الحركه بحيث انها تعمل الحركه وتقف في الإخير وهذا الخيار موجود في برنامج الإيمج ردي

    وطبعاً ببساطه تجعل الصوره خلفيه للجدول الذي فيه رسالة التفعيل او النتيجه التي تريدها

    وهنا خطوات العمل بكل بساطه

    أفتح الفوتوشوب ثم أضغط ( File > New )

    حدد الطول والعرض 1 بكسل

    اجعل طبقتين بلونين مختلفين بحيث الأول يضهر ثم يتدرج للون الآخر



    بعدها أنقل الصورة إلى برنامج إيمج ردي بسهول عن طريق الضغط على الأيقونة التالية في أسفل صندوق الأدوات



    الأن ستضهر لك النوافذ التالية او قم بإضهارها من القائمة العلوية ( Windows )



    اضغط على الأيقونة التي في الصورة ليتم إنشاء طبقة حركة جديدة



    ثم في نافذة طبقات الخلفيات وفي الطبقة الجديدة للحركة اجعل الون مخفي بالضغط على ايقونة العين لتختفي لتضهر كما في الصورة التالية



    وكما في الصورة أضغط هنا على أيقونة حركات التدريج

    ستضهر لك نافذة كالتالية



    وبعدها ستشاهد النتيجة



    ولا تنسى أن تضغط على Once ليتم تحريك الصورة وعرض التأثير مره واحده

    وأخيراً تضيف الصورة كخلفيه للجدول كالتالي :

    كود HTML:
    <table background="bgResult.gif" border="1" bordercolor="#008000" cellpadding="10" cellspacing="0" style="border-collapse: collapse" width="100%">
        <tr>
            <td><b><font color="#008000">نتيجة العمل</font></b></td>
        </tr>
    </table>
    بكل بساطة ستضهر النتيجة كالتالي ليتم جعلها كرسالة نتيجة او تفعيل او إضافة اي شي



    وطبعاً في النهاية تقف ولكن هنا تتكرر لأضعها كمثال

    وأتمنى في هذا الشرح البسيط والمتواضع ان أفدت الكثير


    ويمكنكم زيارة مدونتي http://www.abdulmalik.althari.com/wp
    او على الرابط المختصر http://www.althari.com/blog

    وأي خدمات او مساعده موجودين للحلوين :app:

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









  2. السلام عليكم

    الكود موجود بالجافا سكريبت وهو جدا مميز وسهل الاستخدام

    http://www.swalif.net/softs/showthread.php?t=189283


    وشكرا لطرحك المميز
    السلام عليكم





    __________________
    كل مالا يعطى يضيع

  3. #3
    فضلاً اكتب اسمك الحقيقي هنا
    زائرسراب الليل


    اقتباس المشاركة الأصلية كتبت بواسطة الإمبراطور وحيد
    السلام عليكم

    الكود موجود بالجافا سكريبت وهو جدا مميز وسهل الاستخدام

    http://www.swalif.net/softs/showthread.php?t=189283


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

    شكراً لك أخوي الإمبراطور أول مره اشوف الدرس واستفدت منه كثيراً

    لكن من ناحيتي ما راح اقدر استخدمه في مجالي بالعمل لأن لو تشوف

    كود:
    // @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();
    //}
    الكود طويل مره وراح يزيد ملف جديد في المشروع وهذا اللي نتجنبه لكن فقط في حالتنا

    ولو كان موقع خاص بي لأضفت الحركه اللي عطيتناها

    وشكراً لك يالغالي على المرور والفائده

    تحيتي








  4. حياك الله

    تقدر تستخدم

    <script language="javascript">
    <!--

    //-->
    </script>


    وفي هالحالة ماتحتاج لصورة معينة (زاد عليكم ملف الصورة)

    وكل ماتبي تغير اللون تعمل صورة اخرى
    اما الكود تقدر تستخدمه كل مرة بلون مختلف


    غير ذلك


    <table background="bgResult.gif" border="1" bordercolor="#008000" cellpadding="10" cellspacing="0" style="border-collapse: collapse" width="100%">
    <tr>
    <td><b><font color="#008000">نتيجة العمل</font></b></td>
    </tr>
    </table>


    الكود الخاص بك ماخذ عدة اسطر

    اما الكود باستخدام الجافا
    سطر واحد

    <div id="loading">جاري التحميل</div>




    بالتوفيق بكل حال





    __________________
    كل مالا يعطى يضيع

  5. #5
    فضلاً اكتب اسمك الحقيقي هنا
    زائرسراب الليل


    شكراً لك الإمبراطور انا أعرف كل هذه الأشياء تقنياً

    ولكن طبيعة العمل لا تسمح باستخدام الجافا سكربت

    بمعنى أن كلامك هذا كله ماراح يفيد

    ومثل ماقلت لك لو كان موقع خاص بي لأضفت الجافا سكربت مباشره

    ((وأنا متأكد من أن (((((((هذا الدرس))))))) إستفاد منه الكثير)) مو فقط بهالإستخدام بل لإي إستخدامات أخرى !!

    كما لمسته من الرسائل البريديه التي وصلتني عن هذا الدرس

    وعلى كل حال تحيتي لك










ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض