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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

شرحنا اليوم سنتطرق فيه  لتأثير آخر ألى وهو الإنزلاق صعوداً، نزولاً، يميناً، شمالاً. وعلى أي عنصر يمكن أن يطبق التأثير سواءً صورة أو جسم فإذا لاحظتم بعد دخولكم لهذه التدوينة ربما رأيتم السيدبار ينزلق لمكانه أتٍ من اليسار يمكنك تحميل الصفحة من جديد لترى مرة آخرى. أظن أن الصورة وصلتك مع ذلك سأضع  معاينتان، في هذا التأثير لا تطبق أكواد الجافا فقط 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 { 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 بالمعرف الذي تريد تطبيق عليه التأثير

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

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

عن الكاتب : Hussam

إرشادات

تحميل الملفات

نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
• موقع : Mediafire
• موقع :file-upload
• باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
• تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
• كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
• إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.

أين تجدنا؟

بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web


كلمة الختام

في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com

أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم