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

Ali Majrashiمنذ 8 سنوات

مقدمة:

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>

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

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

ممكن بواسطة 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

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

ممكن تبسيط هذه العملية بإنشاء دالة تعتمد على 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>

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

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

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

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 بالأمثله أعلاه

كلمات دليلية:

إعجاب

أعجبني

8984

مشاهدات

تلقائي