مــجـال الــتــأثــيـرات الــحــركــيـة مــجـال واسـع جـداً ومـن الــصــعـب ان يــتـم شــرحـه بــالــكــامـل لأنـه يــعــتــمـد عــلـى جـزء كــبــيـر فـي لــغـة 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 هو إسم الحركة.
كيف نحصل على اسم الحركة ؟
سـتــجـد مـعـايــنـة لــكـل الـحــركـات وأسـمــائهـا فــقـط اكــتـب اسـم الـحــركـة وطـبــقـه عــلـى مـا تــريـد يــجـب أن تـكــتـب الإسـم مـضــبـوط
مـثـال آخـر، لـو أردنـا تـطــبـيـق حـركـة مـعــيـنـة عـلـى مــواضـيـع الــمـدونـة بــحـيـث كــلـمـا تـم الـتــمـريـر لأسـفـل يـحـدث الـتــأثـيـر عـلـى الــمـوضـوع.
أغـلــب قـوالــب بــلـوجــر تــعــتـمــد عـلــى هــذا الـكــود كــحـاكــم لـلــمــواضـيــع <div class='post-outer'>
كـل مـا عـلـيـك فـعـلـه تــطـبـيـق الـكـود فــيـصــبــحـعـلـى هـذا الـشـكـل :
<div class='post-outer wow animated fadeInUp'>
طـبـعـا يـمـكـنـك تـعـديـل الـتـأثـيـر الـحـركـي بــالـتـأثـيـر الـذي تـريـد...
ملحوظة : قــد يـكــون الـكــود مــتـكــرر فــي الــقـالــب فــيـجــب الــتـطــبـيــق عـلــيـهــم جـمــيـعــا أو الـتــجـربــة حـتــى تـجــد الـصــحـيــح..
إختر نظام التعليقات الذي تفضله
Aucun commentaire
يمكنك وضع تعليقك هنا