24‏/04‏/2015


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

18 Blogger تعليقات
Disqus
18 التعليقات
المشرف
avatar

شكرا على الموضوع اخي ولكن لم تعمل لدي هذه مدونتي اريد عملها للقائمة العلوية من الاعلى لمكانها th3geekweb3.blogspot.com

المشرف
avatar

#Top { animation : Sliding 2s; }هل وضعت التعريف هكذا

المشرف
avatar

نعم اخي قمت بوضعها هكذا ولم تعمل معي

المشرف
avatar

لم تنجح اي من الانميشنات ؟ كنت اريد ان اطبقها على outerwrapper و هو class يعني يجب اظيفه هكذا .outerwrapper عندما اطبق الامر القالب كله يصبح ملخبطاً نفس الشيء مع الـ لوجو هو ايضاً class

المشرف
avatar

أولا القالب عندك كل ملخبط المقاس كبير جداً! بحيث إذا أضفت التأثير فسيظهر بشكل ملخبط
جرب وضعه فوق بين هذين الكودين

المشرف
avatar

جرب وضع الكود بأكمله فوق بين هذين الكودين

المشرف
avatar

لم ينجح ايضاً , الا ان القالب لم يتلخبط شكله :) ما الحل ؟ :/

المشرف
avatar
المشرف
avatar

ايضاً بلا فائدة :/

المشرف
avatar

لم تنجح الطريقة اخي ايضا,لا اريد ان اتعبك معي خلاص انساها :)

المشرف
avatar
ilyas_aouadi 4/25/2015
delete

شكرا على التدوينة الرائعة
ارجو زيارة المدونة http://tknielantrnat.blogspot.com/

المشرف
avatar

أرسل القالب أخي وسيتم التركيب : info@ar1web.com
أو على الأقل جرب بعنصر آخر لليقين فقط

المشرف
avatar

أرسل القالب وسيتم التركيب : info@ar1web.com

المشرف
avatar
pro mady 4/26/2015
delete

ما هو #main-wrapper -__-

المشرف
avatar

هو الصندوق الذي يجمع المواضيع والسيدبار

المشرف
avatar

بدي اخلي امدونه تنزل من اعلي لاسفل كين

المشرف
avatar

لم تنجح معي اخي في قالب بداية نقطة

المشرف
avatar

ما هي الخطوات التي طبقتها؟

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة