عمل المؤثرات الحركية بواسطة Animate.css

Ali Majrashiمنذ 7 سنوات

مقدمة:

Animate.css هي مكتبة css تسمح لك بإضافة مؤثرات حركيه لأي عنصر HTML بصفحاتك تتميز المكتبة بخفتها ودعمها لجميع أنواع المتصفحات وسهلة الإستخدام كل ماعليك هو اضافة css class للعنصر المراد تحريكه وستحصل على أجمل الحركات ومن الممكن استخدام JQuery او اي مكتبات جافاسكربت أخرى مع المكتبه لزيادة قدرات المكتبة أو تبسيط استخدامها

طريقة الإستخدام:

ابسط طريقة هي بتحميل المكتبة من موقعها animate.css او عن طريق صفحة المكتبة على GitHub بعد تحميل المكتبة بجهازك يهمنا الملفين:

  • animate.css  وهو ملف css الكامل للمكتبة والخاصه بالتطوير لسهولة قراءة الملف وخاصه ان الملف غير مضغوط.
  • animate.min.css وهو ملف css المضغوط الخاص بـ production لما تحب تنتقل من مرحلة التطوير الى الإستخدام الفعلي.

راح نستخدم بمقالة اليوم ملف animate.css بعد تحميل الملف قم بإنشاء مجلد جديد لنفرض animate وداخل هذا المجلد نقوم بإنشاء مجلد css وداخله نقوم بحفظ ملف animate.css الآن لنبدأ بإنشاء أول ملف لنا داخل المجلد animate يكون ملف من نوع html عادي لنفرض ان اسمه index.html وراح يكون محتواه جدا بسيط.

كالتالي:


<!DOCTYPE html>
<html>
<head>
	<title>Animate.css</title>
	<link rel="stylesheet" href="css/animate.css">
</head>
<body>
	
</body>
</html>

لاحظ: داخل هذا الملف قمنا بتضمين ملف animate.css لاستخدامه داخل هذا الملف بواسطة:


<link rel="stylesheet" href="css/animate.css">

الآن نستطيع إستخدام المكتبة لإنشاء المؤثرات كما نحب وهي سهلة كل الي عليك عند انشاء اي عنصر في HTML  مثلا H1 وتحب تحركه نضيف له class المكتبة الرئيسي animate ثم بعده نضيف نوع الحركة الي نرغب بتنفيذها 

مثال:


<h1 class="animated bounce">3alampro.com</h1>

عند زيارة الصفحة من المتصفح راح يتم تنفيذ الحركة مباشرة لمرة واحدة ولكن اذا حبيت ان الحركة تكون مستمرة نضيف class جديد infinite للعنصر المراد تحريكه 

مثال:


<h1 class="animated infinite bounce">3alampro.com</h1>

في هذا المثال لما تزور الصفحة راح يتم تنفيذ الحركة ولن تتوقف راح تستمر الحركة دام انه infinite مستخدم في العنصر

راح يكون شكل الكود النهائي 

كالتالي:


<!DOCTYPE html>
<html>
<head>
	<title>Animate.css</title>
	<link rel="stylesheet" href="css/animate.css">
</head>
<body>
	<h1 class="animated bounce">3alampro.com</h1>
	<h1 class="animated infinite bounce">3alampro.com</h1>
</body>
</html>

عند عمل الكود بالمتصفح سيكون الناتج كالتالي:

1.gif

طرق استخدام متطوره:

ممكن بواسطة JQuery نضيف أي مؤثرات لأي عنصر بالصفحة باستخدام دالة addClass في JQuery

مثال:


<h1 id="animateMe" class="animateMe">3alampro.com</h1>
	<script type="text/javascript">
		$('#animateMe').addClass('animated bounce');
	</script>

ملاحظة: لاتنسى تضمن مكتبة JQuery بنفس الصفحة نفس ماعملنا مع مكتبة css راح نقوم بعمل مجلد جديد باسم js وداخله نخزن ملف jquery.js

ليصبح الكود النهائي 

كالتالي:


<!DOCTYPE html>
<html>
<head>
	<title>Animate.css</title>
	<link rel="stylesheet" href="css/animate.css">
	<script src="js/jquery.js"></script>
</head>
<body>
	<h1 class="animated bounce">3alampro.com</h1>
	<h1 class="animated infinite bounce">3alampro.com</h1>
	<h1 id="animateMe" class="animateMe">3alampro.com</h1>
	<script type="text/javascript">
		$('#animateMe').addClass('animated bounce');
	</script>
</body>
</html>

لاحظ: هنا استخدمنا دالة addClass في JQuery لتنفيذ الحركة على العنصر H1 الذي يحمل ID باسم animateMe

عند عمل الكود بالمتصفح سيكون الناتج كالتالي:

2.gif

ممكن تبسيط هذه العملية بإنشاء دالة تعتمد على JQuery وتسهل عملية تحريك أي عنصر بالصفحة 

مثال:


	<h1 id="animateMeAlso" class="animateMe">3alampro.com</h1>
	<script type="text/javascript">
		// JQuery Extended Function to make animation easy
		$.fn.extend({
		    animateCss: function (animationName) {
		        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
		        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
		            $(this).removeClass('animated ' + animationName);
		        });
		    }
		});

		// Here How To Use It
		$('#animateMeAlso').animateCss('bounce');
	</script>

لاحظ: قمنا بإنشاء دالة جديدة بإسم animateCss لتحريك اي عنصر بالصفحة بواسطة معرف ID لهذا العنصر وبالمثال قمنا بتحريك H1 الذي يحمل الإسم animateMeAlso

ليصبح الكود بشكله النهائي 

كالتالي:


<!DOCTYPE html>
<html>
<head>
	<title>Animate.css</title>
	<link rel="stylesheet" href="css/animate.css">
	<script src="js/jquery.js"></script>
</head>
<body>
	<h1 class="animated bounce">3alampro.com</h1>
	<h1 class="animated infinite bounce">3alampro.com</h1>
	<h1 id="animateMe" class="animateMe">3alampro.com</h1>
	<h1 id="animateMeAlso" class="animateMe">3alampro.com</h1>
	<script type="text/javascript">
		// JQuery addClass Method to Add CSS To HTML Element
		$('#animateMe').addClass('animated bounce');
		// JQuery Extended Function to make animation easy
		$.fn.extend({
		    animateCss: function (animationName) {
		        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
		        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
		            $(this).removeClass('animated ' + animationName);
		        });
		    }
		});

		// Here How To Use It
		$('#animateMeAlso').animateCss('bounce');
	</script>
</body>
</html>

عند عمل الكود بالمتصفح سيكون الناتج كالتالي:

3.gif

المؤثرات المتوفره:

توفر المكتبه العديد من المؤثرات تستطيع اختيار مايناسبك من التالي:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • 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

ملفات المشروع:

كما يمكنك تحميل جميع الأمثله بهذا المقال من هنا animate.zip للإستفادة منه والتطبيق عليه يحتوي الملجد على كل من ملفات animate.css و jquery.js وملف index.html بالأمثله أعلاه

كلمات دليلية:
2
إعجاب
8232
مشاهدات
1
مشاركة
1
متابع
متميز
محتوى رهيب

التعليقات (1)

ahmed wael:

غير مفيد

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !