magic-animations : انیمیشنهای CSS3 با افکتهای مخصوص

- visibility ۴ mode_comment

در این مطلب میخوام یک ابزار بنام magic-animations رو خدمت شما معرفی کنم و اونو آموزش بدم.

این ابزار مجموعه از افکتهای زیبا برای انیمیشن رو در اختیارتون میزاره که میتونین از اونا در طراحی سایتتون بهره ببرین. این مجموعه شامل افکتهای زیر هست :

  • Magic Effects
  • Bling

  • Static Effects
  • Static Effects Out
  • Perspective
  • Rotate
  • Slide
  • Math
  • Tin
  • Bomb
  • Boing
  • On the Space

میبینید که روی هر باکسی که هاور میکنید افکت زیبایی انجام میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به magic.min.css و jquery.min.js نیاز داریم. من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایل مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

میبینید که یک div قرار دادیم و استایلهای اون رو هم قرار دادیم. برای اینکه افکتهای انیمیشنی روی div اعمال بشه میتونین از jquery استفاده کنید. دیگه به شما بستگی داره که میخواین طی چه رویدادی افکت اعمال بشه. میتونین از hover یا click یا dblclick و یا ... استفاده کنید. من در این مطلب میخوام از hover استفاده کنم.

اولین کاری که باید بکنید ، اینه که به این صفحه برید و افکت مورد نظرتونو انتخاب کنید. روی هر کدوم که کلیک کنید ، افکت روی باکس سمت چپی اعمال میشه.

magic1

من میخوام از افکت puffIn استفاده کنم. برای اینکار باید کلاس puffIn رو طی شرایط خاصی به div مورد نظر اعمال کنیم. من میخوام وقتی کاربر روی div هاور کرد ، کلاس مورد نظر اضافه بشه. بصورت زیر :

کدی که در بالا نوشتیم دو کلاس puffIn و magictime به div اضافه میشه و افکت مورد نظر بر روی اون اعمال میشه. کلاس magictime مدت زمان انجام افکت رو مشخص میکنه. مدت زمان پیش فرض 1 ثانیه هست و شما میتونین اون رو تغییر بدین. بصورت زیر :

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
mohammad nikkhah

لطفا سعی کنید تمام اموزش های سایت به صورت فیلم بزارید
این روش برای یادگیری خیلی بهتره
در مرد خود من که این طوره لطفا اموزش هاتون به صورت فیلم بر روی سایت قرار دهید
با تشکر

محمد اسفندیاری

شاید در آینده این کارو انجام بدیم
موفق باشید

نادیا

عالی بود – مرسی

محمد اسفندیاری

موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.