• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



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

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

4 2069 ۱۸ بهمن ۹۳

در این مطلب میخوام یک ابزار بنام 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 ثانیه هست و شما میتونین اون رو تغییر بدین. بصورت زیر :

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    mohammad nikkhah(۱۹ بهمن ۱۳۹۳)

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

  • ‏‏
    نادیا(۶ اسفند ۱۳۹۳)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram