JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

اكتب ما تود البحت عنه و اضغط Enter
recent
عاجل
الصفحة الرئيسية

عمل تأثير الأنزلاق لجميع الأتجاهات




اقدم لكم شرح بسيط لعمل تأثير الأنزلاق لجميع الأتجاهات


شرحنا اليوم سنتطرق فيه لتأثير آخر ألى وهو الإنزلاق صعوداً، نزولاً، يميناً، شمالاً. وعلى أي عنصر يمكن أن يطبق التأثير سواءً صورة أو جسم فإذا لاحظتم بعد دخولكم لهذه التدوينة ربما رأيتم السيدبار ينزلق لمكانه أتٍ من اليسار يمكنك تحميل الصفحة من جديد لترى مرة آخرى. أظن أن الصورة وصلتك مع ذلك سأضع معاينتان، في هذا التأثير لا تطبق أكواد الجافا فقط Css لذا كن متيقن أنه لن يأثر على تحميل موقعك بل سيعطي لموقعك لمسة جميلة يمكن أن تستعملها بالشعار مثلاً كما يستخدمها الجميع، على العموم الإختيار لك. الكود أو keyframe يدعم أغلب المتصفحات إستعمالاً كما الأجهزة الذكية ندخل للمعاينتين ثم الشرح





شرح  طريقة التركيب
1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin> 
3. ضع الكود التالي قبله [ فوقه ]



انزلاق من اليمين



@-webkit-keyframes slide{
from{transform:translate(+1000px, 0px);}
to{transform:translate(0px,0px);}}
@keyframes slide{
from{transform:translate(+1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
#main-wrapper {-moz-animation:slide 4s ;-webkit-animation:slide 4s;
animation:slide 4s }

انزلاق من اليسار


@-webkit-keyframes slide{
from{transform:translate(-1000px, 0px);}
to{transform:translate(0px,0px);}}
@keyframes slide{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
#main-wrapper {-moz-animation:slide 4s ;-webkit-animation:slide 4s;
animation:slide 4s }


انزلاق من اسفل الى اعلى



@-webkit-keyframes slide{
from{transform:translate(0px, 1000px);}
to{transform:translate(0px,0px);}}
@keyframes slide{
from{transform:translate(0px, 1000px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
#main-wrapper {-moz-animation:slide 4s ;-webkit-animation:slide 4s;
animation:slide 4s }


انزلاق من اعلى الى اسفل



@-webkit-keyframes slide{
from{transform:translate(0px, -1000px);}
to{transform:translate(0px,0px);}}
@keyframes slide{
from{transform:translate(0px, -1000px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
#main-wrapper {-moz-animation:slide 4s ;-webkit-animation:slide 4s;
animation:slide 4s }




 غير main-wrapper بالمعرف الذي تريد تطبيق عليه التأثير




و شكرا
author-img

maher

تعليقات
    ليست هناك تعليقات
    إرسال تعليق
      الاسمبريد إلكترونيرسالة