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

مــجـال الــتــأثــيـرات الــحــركــيـة مــجـال واسـع جـداً ومـن الــصــعـب ان يــتـم شــرحـه بــالــكــامـل لأنـه يــعــتــمـد عــلـى جـزء كــبــيـر فـي لــغـة CSS لــكـن هــنـاك حـل ســهـل وبــســيـط يــعــتــمـد عــلــيـه أغــلـب الــمــســتــخــدمـون لــلــتــأثــيـرات وهـو عــبـر الــتــأثــيـرات الــجــاهـزة.

وهـذا الــشـرح والــكـود إعـداد حــصـري لــتـقــنـي ويـب 

مــن الــمـعـايــنــة الـتـالــيــة يـمـكــنــك رؤيــة مــثــال تـقـريــبــي لـفــكــرة عــمــل هــذه الـتـأثــيــرات شــاهــده ولا تـنــســى الـتـمــريــر لأســفــل حــتــى نـهــايــة الـصـفــحــة لــتــرى بــعــض الــتــأثـيــرات :

المعــاينة

كيف يمكن عمل تلك التأثيرات ؟

أول شـيء اســتـخـدم الـكـود الــتـالـي فــي قــالــبــك الــخــاص :

<link href='http://cnmu.googlecode.com/svn/trunk/2015/animate.css' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B9wf6r4PTnMianRNWmU0VFdhVHc' type='text/javascript'/>

كـل مـا عـلــيـك فـعــلـه هـو اسـتــخـدام الــكـلاس الـتــالـي : class="wow animated #"

رمز # يستبدل بإسم الحركة
كــمـثـال، لـو لــديـنـا صـورة نـريـد ان نــطـبـق عـلــيـهـا الــحـركـة سـيــصـبـح الـكـود الـخـاص بـهـا كـالــتـالـي :

<img class="wow animated tada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ik829h2n-5in_O7FvUPI-ArCf4eNDLEkxHuIAcPjPsXQFK46FmYow4v1Fc48EpXOIXvA58m96pzqagmI6n1-26hfwYlYfR42KMAeF3oHVbfuU_Q_qaNY01QDTY9KCt984IUSeJ6uBhic/s1600/256%25D8%25A1256.png"/>

فكما تلاحظ كلمة tada هو إسم الحركة.

كيف نحصل على اسم الحركة ؟

بـبــسـاطــة مــن الــمـوقــع الــتـالــي : http://daneden.github.io/animate.css

سـتــجـد مـعـايــنـة لــكـل الـحــركـات وأسـمــائهـا فــقـط اكــتـب اسـم الـحــركـة وطـبــقـه عــلـى مـا تــريـد يــجـب أن تـكــتـب الإسـم مـضــبـوط

إضغط هنا لفتح قائمة أسماء قابلة للنسخ

مـثـال آخـر، لـو أردنـا تـطــبـيـق حـركـة مـعــيـنـة عـلـى مــواضـيـع الــمـدونـة بــحـيـث كــلـمـا تـم الـتــمـريـر لأسـفـل يـحـدث الـتــأثـيـر عـلـى الــمـوضـوع.

أغـلــب قـوالــب بــلـوجــر تــعــتـمــد عـلــى هــذا الـكــود كــحـاكــم لـلــمــواضـيــع <div class='post-outer'>

كـل مـا عـلـيـك فـعـلـه تــطـبـيـق الـكـود فــيـصــبــحـعـلـى هـذا الـشـكـل :

<div class='post-outer wow animated fadeInUp'>

طـبـعـا يـمـكـنـك تـعـديـل الـتـأثـيـر الـحـركـي بــالـتـأثـيـر الـذي تـريـد...

ملحوظة : قــد يـكــون الـكــود مــتـكــرر فــي الــقـالــب فــيـجــب الــتـطــبـيــق عـلــيـهــم جـمــيـعــا أو الـتــجـربــة حـتــى تـجــد الـصــحـيــح..

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!