سقوط ثلوج على الموقع [مؤثرات]

سقوط ثلوج على الموقع [مؤثرات]
    سقوط ثلوج على الموقع
    اليوم سوف اشرح لكم طريقة جميلة جداً وسهلة فى اعدادها لإضافة تأثيرات لتساقط الثلوج على مدونتك والتى سوف تترك انطباع اكثر من رائع لزوار موقعك على الأنترنت , ومن مميزاتة انة لا يؤثر على سرعة موقعك على الأنترنت ولا يستخدم jQuery فى موقعك مجرد كود CSS وسوف يعمل بكفائة.

    إذا كنت ترغب فى مشاهدة ومعاينة تساقط الثلوج على الموقع

    كيفية عمل تأثير سقوط الثلوج على موقع الأنترنت

    الخطوة الأولى. تقوم بالدخول على مدونتك على Blogger وتختار قالب
    لوحة تحكم بلوجر

    الخطوة الثانية. تقوم بأختيار "تحرير HTML" وتبحث عن التاج
    بحث عن التاج داخل الأكواد

    ]]></b:skin>

    الخطوة الثالثة. تضع هذا الكود الخاص بـ CSS اعلى التاج اذى قمت بالبحث عنه

    /* --------- Snow falling for Blogger (www.modwinty.com)----------- */
    @keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    }
    
    @-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    }
    
    @-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    }
    
    @-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    }
    
    #falling-snow {
    background-image: url(http://1.bp.blogspot.com/-Khb2iUH0c4U/VcWYpEEG1II/AAAAAAAAAcQ/LIs01bJtKcU/snow-01.png), url(http://4.bp.blogspot.com/-xlQArjUqGYI/VcWYpMAzy2I/AAAAAAAAAcU/6mFyZnC_U5s/snow-03.png), url(http://2.bp.blogspot.com/-utfMKP0tvag/VcWYpAZDVBI/AAAAAAAAAcM/Y1JigJBC_wM/snow-02.png);
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
    }
    /* --------- End of Snow falling for Blogger (www.modwinty.com)----------- */



    الخطوة الرابعة. قم بالبحث مجدداً داخل نموذج القالب الخاص بـ بلوجر على هذا التاج


    <body expr:class='"loading" + data:blog.mobileClass'>


    الخطوة الخامسة. تقوم بوضع هذا الكود أسفل التاج الذى قمت بالبحث عنة
    <div id='falling-snow'>





    الخطوة السادسة. تبحث أخيراُ على التاج


    </body>



    الخطوة السابعة. وتضع هذا الكود اعلى التاج مباشرة
    </div>


    الخطوة الثامنة. قم بحفظ النموذج واستمتع بشكل موقعك الرائع مع الثلوج
    حفظ النموذج وعودة




    Modwinty
    @مرسلة بواسطة
    تقوم بعمل دروس وشروحات خاصة بمجال التكنولوجية والتقنيات الحديثة من خلال مدونتي وقناتي على اليوتيوب الى جانب تقديم حلول للمشاكل التقنية التي تفيد الزائر العربي

    إرسال تعليق

    X