animate.css

کتابخانه انیمیشن های CSS یا Animate.css

مقدمه

در دنیای امروز طراحی سایت و نرم افزارهای موبایل, متحرک سازی اجزا و یا همان انیمیشن ها جایگاه به خصوصی دارند و تجربه کاربری دلنشینی به وجود می آورند.
اگر با ساخت انیمیشن ها آشنا باشید می دانید که فقط دانستن نحوه ساخت آنها به شما کمک نمی کند بلکه ساخت یک انیمشین زیبا و کاربر پسند نیازمند ذوق طراحی به نسبت خوب و همینطور صرف وقت زیادی برای تنظیم نحوه حرکات و همینطور تعیین زمان آنها می باشد. در اینجا است که وجود کتابخانه های اینچنینی کمک های فوق العاده ای در طراحی می باشند. همینطور برای آشنایی کامل با انیمیشن ها در css می توانید به فصل دوم متحرک سازی در این سایت مراجعه کنید.

Animate.css

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

نحوه استفاده

در مرحله اول باید کتابخانه را در قسمت head به صفحه لینک کنید اگر می خواهید کتابخانه را به صورت محلی داشته باشید می توانید آن را از اینجا دانلود کنید و یا می توانید از آدرس cdn که در صفحه نشان داده شده است استفاده کنید. تصویر زیر دو راه حل را نشان می دهد.

animate.css

بعد از انتخاب انیمیشن مورد نظر با استفاده از منوی موجود در صفحه کافی است کلاس های نوشته شده در قسمت پایین صفحه را به عنصری که می خواهید بدهید تا انیمیشن بر روی آن اعمال شود.

نکته قابل توجه اینکه دکمه سوییچی به نام infinite در بالای صفحه می باشد که با فعال کردن آن می توانید انیمیشن را از نوع تکرار شدنی تا بی نهایت داشته باشید, در ضمن وقتی فعال می شود کلاسی به نام infinite در پایین صفحه اضافه می شود که آن کلاس را هم باید به عنصر مورد نظرتان بدهید. عکس زیر گویای مطلب می باشد.

animate.css

در ضمن با کلیک بر روی عبارت Animate.css می توانید عبارت مورد نظر خودتان را به جای آن بنویسید.

برای بررسی پشتیبانی مرورگرهای مختلف در مورد انیمیشن ها به این سایت مراجعه کنید.

12 دیدگاه برای “کتابخانه انیمیشن های CSS یا Animate.css

  1. سلام خسته نباشید.

    اول اینکه تشکر زیادی میکنم بابت فایل کتابخانه انیمیشین CSS که در سایتتون قرار داده بودید.

    فقط یه مشکلی هست که نمیدونم چطور از اون در تگ Style استفاده کنم.میشه کمکم کنید؟؟

    مثال:

    .h1 {
    چطوری توی اینجا از کتابخانه انیمیشن استفاده کنم؟؟
    }

    1. سلام. ممنون از لطف شما

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

      https://github.com/daneden/

      پس شما نیاز دارید که در این فایل دنبال نام انیمیشن مورد نظرتون بگردین. منظورم keyframe مورد نظره.

      بعد با استفاده از نام انیمیشن می تونید ویژگی های دیگر انیمیشن رو تغییر بدین.

      اینم مثال:

      http://codepen.io/seyedi/pe

    1. کافیه توی جاوااسکریپت تنظیم کنید که زمانی که اسکرول به عنصر رسید کلاس های این انمیشن ها به اون عنصر اضافه بشن.

      برای افکت های مربوط به اسکرول پروژه های ساخته شده زیاده بگردید پیدا می کنید

      این مطلب هم اگر نخوندید شاید کمکتون کنه

      http://css-tricks.ir/?p=4157

  2. سلام چطور ميشه يه كاري كنيم كه بعد از لود شدن كامل صفحه و وقتي كه كاربر به اون قسمتي كه انيميشن گذاشتيم اومد،انيميشن اجرا شه؟

    1. سلام. کافیه توی جاوااسکریپت تنظیم کنید که زمانی که اسکرول به عنصر رسید کلاس های این انمیشن ها به اون عنصر اضافه بشن.

      برای افکت های مربوط به اسکرول پروژه های ساخته شده زیاده بگردید پیدا می کنید
      این مطلب هم اگر نخوندید شاید کمکتون کنه

      http://css-tricks.ir/?p=4157

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *