مقدمه
در دنیای امروز طراحی سایت و نرم افزارهای موبایل, متحرک سازی اجزا و یا همان انیمیشن ها جایگاه به خصوصی دارند و تجربه کاربری دلنشینی به وجود می آورند.
اگر با ساخت انیمیشن ها آشنا باشید می دانید که فقط دانستن نحوه ساخت آنها به شما کمک نمی کند بلکه ساخت یک انیمشین زیبا و کاربر پسند نیازمند ذوق طراحی به نسبت خوب و همینطور صرف وقت زیادی برای تنظیم نحوه حرکات و همینطور تعیین زمان آنها می باشد. در اینجا است که وجود کتابخانه های اینچنینی کمک های فوق العاده ای در طراحی می باشند. همینطور برای آشنایی کامل با انیمیشن ها در css می توانید به فصل دوم متحرک سازی در این سایت مراجعه کنید.
Animate.css
این کتابخانه در تاریخ نوشتن این مطلب شامل 74 انیمیشن یکتا می باشد که به سادگی قابل استفاده می باشند. این کتابخانه در سایت گیتهاب قابل دسترسی می باشد.
خود این کتابخانه صفحه ای برای دیدن و آزمایش انیمیشن ها دارد اما ما تصمیم گرفتیم تا ابزاری از روی همان صفحه برای استفاده و انتخاب راحتر انیمیشن ها بسازیم. لینک زیر شما را به این صفحه هدایت می کند.
نحوه استفاده
در مرحله اول باید کتابخانه را در قسمت head به صفحه لینک کنید اگر می خواهید کتابخانه را به صورت محلی داشته باشید می توانید آن را از اینجا دانلود کنید و یا می توانید از آدرس cdn که در صفحه نشان داده شده است استفاده کنید. تصویر زیر دو راه حل را نشان می دهد.
بعد از انتخاب انیمیشن مورد نظر با استفاده از منوی موجود در صفحه کافی است کلاس های نوشته شده در قسمت پایین صفحه را به عنصری که می خواهید بدهید تا انیمیشن بر روی آن اعمال شود.
نکته قابل توجه اینکه دکمه سوییچی به نام infinite در بالای صفحه می باشد که با فعال کردن آن می توانید انیمیشن را از نوع تکرار شدنی تا بی نهایت داشته باشید, در ضمن وقتی فعال می شود کلاسی به نام infinite در پایین صفحه اضافه می شود که آن کلاس را هم باید به عنصر مورد نظرتان بدهید. عکس زیر گویای مطلب می باشد.
در ضمن با کلیک بر روی عبارت Animate.css می توانید عبارت مورد نظر خودتان را به جای آن بنویسید.
برای بررسی پشتیبانی مرورگرهای مختلف در مورد انیمیشن ها به این سایت مراجعه کنید.
احسنت مجتبی جان خیلی خفن شده
احسنت مجتبی جان خیلی خفن شده
خیییییلی باحال وساده بود دمتگرمممممممممممممممم…
این هم از تلاش بنده :)
انیمیشن ابتدایی این طرح، از کتابخانه Animate.css هست.
Live view: http://codepen.io/ehsanamir…
Editor view: http://codepen.io/ehsanamir…
سلام خسته نباشید.
اول اینکه تشکر زیادی میکنم بابت فایل کتابخانه انیمیشین CSS که در سایتتون قرار داده بودید.
فقط یه مشکلی هست که نمیدونم چطور از اون در تگ Style استفاده کنم.میشه کمکم کنید؟؟
مثال:
.h1 {
چطوری توی اینجا از کتابخانه انیمیشن استفاده کنم؟؟
}
سلام. ممنون از لطف شما
نکته اول اینکه همه انیمیشن های این کتابخانه در فایل آن قابل مشاهده است.
https://github.com/daneden/…
پس شما نیاز دارید که در این فایل دنبال نام انیمیشن مورد نظرتون بگردین. منظورم keyframe مورد نظره.
بعد با استفاده از نام انیمیشن می تونید ویژگی های دیگر انیمیشن رو تغییر بدین.
اینم مثال:
http://codepen.io/seyedi/pe…
سلام
مجتبی جان چطور میشه تنظیم کرد با رسیدن اسکرول به پیکسل های مشخص شده این انیمیشن ها اجرا بشن؟
کافیه توی جاوااسکریپت تنظیم کنید که زمانی که اسکرول به عنصر رسید کلاس های این انمیشن ها به اون عنصر اضافه بشن.
برای افکت های مربوط به اسکرول پروژه های ساخته شده زیاده بگردید پیدا می کنید
این مطلب هم اگر نخوندید شاید کمکتون کنه
http://css-tricks.ir/?p=4157
سلام چطور ميشه يه كاري كنيم كه بعد از لود شدن كامل صفحه و وقتي كه كاربر به اون قسمتي كه انيميشن گذاشتيم اومد،انيميشن اجرا شه؟
سلام. کافیه توی جاوااسکریپت تنظیم کنید که زمانی که اسکرول به عنصر رسید کلاس های این انمیشن ها به اون عنصر اضافه بشن.
برای افکت های مربوط به اسکرول پروژه های ساخته شده زیاده بگردید پیدا می کنید
این مطلب هم اگر نخوندید شاید کمکتون کنه
http://css-tricks.ir/?p=4157
عرض تشکر دارم
با سلام و تشکر از شما
چطور میشه این انیمیشن های جذاب رو با استفاده از قابلیت hover فعال کرد؟ یعنی وقتی که عنصری رو با اشاره گر لمس کردیم فعال بشه و وقتی که اشاره گر خروج کرد از روی عنصر غیرفعال بشه. میشه؟
سلام خسته نباشید این انیمیشن ها در هنگام باز شدن صفحه انجام میشوند ولی من میخوام وقتی موس میره روی اون ها این انیمیشن ها اعمال شود اگه بهم کمک کنید ممنون میشم.
سلام، keyframe انیمیشن رو در سی اس اس بنویسید، بعد انیمیشن رو هم در زمان hover عنصر معرفی کنید.
این ساده ترین راه هستش.
این نمونه کد هم بهترین راه رو نشون میده:
https://codepen.io/valhead/pen/rfump
در کل اگر مطالب رو بخونید به راحتی می تونید این کار رو انجام بدید:
https://css-tricks.ir/?p=1401
سلام ببخشید چجوری میشه کاری کرد که این انیمیشن ها بعد از هر بار خارج شدن از viewport و بعد ورود دوباره با اسکرول کردن به viewport دوباره اجرا بشن؟
سلام، این مطلب رو بخونید
https://css-tricks.ir/?p=4157
سلام خسته نباشید چطور میشه وقتی موس رفت روی آیتم انیمیشن اجرا بشه?
سلام،
http://css-tricks.ir/reference/animation-play-state