تأثيرات Css فريدة

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

• معاينة

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

<link href='//ar1web-com.googlecode.com/svn/trunk/animate.css' rel='stylesheet'/>

4. لتفعيل الكود فضع الكود التالي بالمكان الذي تريد تطبيق عليه التأثير

<div class='animated bounceInDown'></div>

5. طبعاً يجب أن تكون على دراية ولو قليلاً لتفعيله فيجب على نهاية </div> أن تكون بأخر المعرف أي كود الصورة مثلاً أو شيء آخر هكذا :

<div class='animated bounceInDown'>
<h2 class='title'>هذا مثال</h2>
  </div>

6. ما يتبقى عليك إلاّ إختيار إسم التأثير ووضعه بدل bounceInDown بدون حذف animated
ملاحظة : بعض التأثيرات لا تعمل في أمكان معينة، لذا وجب تجربة تأثير آخر لليقين بأن المشكلة في مكان وضع التأثير
قائمة أسماء التأثيرات كما هي بالمعاينة :
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

By glok

Similiar tagsCss