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




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

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

- تأثير يأتي من اليسار -
@-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 { animation : Sliding 2s; }

- تأثير يأتي من الأعلى -
@-webkit-keyframes slide{ from{transform:translate(0, 1000px);} to{transform:translate(0px,0px);}} @keyframes slide{ from{transform:translate(0, -100px);opacity:0} to{transform:translate(0px,0px);opacity:1.1;} #main-wrapper { animation : Sliding 2s; }

- تأثير يأتي من الأسفل -
@-webkit-keyframes slide {from{transform:translate(0, 1000px);} to{transform:translate(0px,0px);}} @keyframes slide{from{transform:translate(0, -100px);opacity:0} to{transform:translate(0px,0px);opacity:1.1;} #main-wrapper { animation : Sliding 2s; }

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

  1. ممكن تفعلها في مدوناتي لم افهم

    ردحذف
    الردود
    1. ساضع الشرح بالفيديو هده الاسبوع و شكراا =y

      حذف
  2. ما معنى تلك الجملة الخيرة

    ردحذف
  3. اتعملت على الهيدر ومردتيش تتعمل على اى شى اخر

    ردحذف
    الردود
    1. غير معرف الذي تريد تطبيق عليه التأثير
      http://jazairiweb.blogspot.com/p/blog-page_5.html

      حذف
    2. اخى حضرتك واضع فوق اكواد انا استخدمها ووضعت معرف الهيدر واشتغل ووضعت كود اخر ومعرف اخر ولكن لم يشتغل

      حذف
  4. لم افهم !! و لاكن ساشرح مثال اخر....
    الكود يشتغل على class فقط ليس id او معرف اخر

    ردحذف

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