رفتن به مطلب
انجمن پی سی دی
amuzeshtak

انیمیت کردن عناصر صفحه وب با Animate.css

پست های پیشنهاد شده

در این مقاله میخوایم روش انیمیت کردن عناصر ص??حه وب با کتابخانه Animate.css رو یاد بگیریم

 

قدم اول : دانلود و آپلود کتابخانه

برای دانلود این کتابخانه وارد این لینک بشید : https://daneden.github.io/animate.css/

 

 

حالا در این قسمت بر روی Download Animate.css کلیک کنید تا این کتاب خانه براتون دانلود بشه

 

قدم دوم : اضا??ه کردن کتابخانه به ص??حات پروژه

همون طوری که در تگ head به ص??حات استایل (Style.css) لینک میدیم باید این کتابخانه رو هم به صورت زیر لینک بدیم :

 

 

قدم سوم : ا??زودن انیمیشن به یک عنصر

برای ا??زودن انیمیشن ما براحتی میریم که یک کلاس رو به عنصر خودمون اضا??ه کنیم ، پس اگر عنصر زیر رو داشته باشیم :

 

logo.png

 

در اینجا ما ابتدا کلاس منبع یعنی " animated " رو به عنصر مورد نظر اضا??ه میکنیم و بعد براحتی میتونیم کلاس ا??کت های مت??اوت رو هم به عنصر اضا??ه کنیم ، به این صورت :

 

logo.png

 

قدم چهارم: ا??زودن کلاس ا??کت های مت??اوت به عنصر

در ص??حه اصلی این کتابخانه شما میتونید تمامی کلاس ها رو مشاهده کنید که در زیر چند نمونه از این کلاس رو برای شما آوردیم :

 

bounce

shake

wobble

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInLeftBig

fadeInRight

fadeInRightBig

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

slideInDown

slideInLeft

slideInRight

slideInUp

الان کا??یه که یکی از این کلاس ها رو هم به عنصر مورد نظر خودمون اضا??ه کنیم ، به این صورت :

 

logo.png

 

خوب الان به لود شدن ص??حه ما عنصر ماهم متحرک خواهد بود .

 

آموزش ویدیویی این مقاله همراه با کتابخانه WOW.js رو میتونید در سایت آموزش تک مشاهده کنید .

 

لینک آموزش رو در زیر میتونید ببینید:

 

آموزش انیمیت کردن عناصر ص??حه وب با Animate.css

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

×
×
  • جدید...