جلسه ۷۸ – مثال های بیشتر از انیمیشن در CSS

تو مقاله قبل، با مفهوم اینکه انیمیشن چیه و چیکار می‌کنه آشنا شدیم.

فهمیدیم که چطور با کمک CSS، انیمیشن های جذابی برای وب سایتمون بسازیم و مراحل اجراشون رو تعیین کنیم.

اگر هنوز مقاله آشنایی با Animation ها در CSS رو نخوندید پیشنهاد می‌کنم هرچه سریعتر، بخونیدش و بعد به این صفحه مراجعه کنید.

مثال ها

تو این مقاله از آموزش طراحی وب سایت، با هم چند مثال دیگه رو مرور می‌کنیم تا نه تنها با ساخت و کد نویسی انیمیشن ها بیشتر آشنا بشیم، بلکه ایده های بیشتری هم تو ذهنمون از کاربرد انیمیشن، شکل بگیره.

صفحه انتظار

تو این مثال،‌صفحه انتظاری رو بررسی می‌کنیم که کاربرد های متعددی داره.

می‌تونیم از این صفحه، زمانی استفاده کنیم که وب سایتمون در حال لود شدن هست، یا حتی زمانی که می‌خوایم صفحات دیگه ی وب سایتمون رو باز کنیم.

dark

تو این انیمیشن، از آیکون های font awesome استفاده کردیم.

تنها انیمیشن به کار رفته، خاصیت transform و مقدار rotate در CSS هست.

نحوه چرخش آیکون ما بسیار مهمه. این مسئله رو با مقدار linear برای خاصیت animation-timing-function مشخص کردیم که یک چرخش یکنواخت رو به آیکون ما می‌ده. شما می‌تونین مقادیر دیگه رو هم امتحان کنین.

توپ های شناور

مثال زیر، ترکیب مناسبی رو از تاخیر ها یا همون animation-delay های متفاوت به اجرا می‌زاره.

چندین توپ رو می‌بینیم که حالت شناور و موجی بودن روی آب رو به خودشون گرفتن.

dark

کد CSS ساده ای داره. تنها نکته ای که باید بهش توجه کنین، نحوه استفاده از خاصیت animation-delay برای هر کدوم از توپ ها هست.

مقدار این delay ها، باید منظم تغییر کنه که بتونیم حرکات به ترتیب و مناسب رو پشت سر هم داشته باشیم.

به این شکل، از اونجایی که مدت زمان انیمیشن ۱ ثانیه هست، و قراره تمامی ۵ توپ دیگه بعد از توپ اول حرکت کنن، تاخیر ها رو به اندازه ۰.۲ ثانیه افزایش می‌دیم که در انتها، بالا رفتن آخرین توپ، همزمان با پایین اومدن اولین توپ باشه.

خوش آمد گویی

انیمیشن زیر، شباهت زیادی به انیمیشن صفحه انتظار داره. اما چیزی که این دو رو متفاوت می‌کنه، اینه که انیمیشن زیر، برای زمانی استفاده می‌شه که انتظار به پایان رسیده و کاربر قراره به صفحه وب سایت وارد بشه.

dark

تو این انیمیشن، از خاصیت animation استفاده کردیم و دیگه خبری از خاصیت های بلند انیمیشن نیست.

مثال فوق، تو سه مرحله اجرا می‌شه و در نهایت، با استفاده از مقدار forwards (مربوط به خاصیت animation-fill-mode)، در مرحله آخر خودش متوقف می‌شه.

اگه تو جایی از مطالب براتون ابهامی به وجود اومد، حتما تو قسمت نظرات بپرسین. ما هواتون رو داریم 🙂

قلب تپنده

تو این انیمیشن، مجددا با کمک آیکون های font aweosme، یک قلب تپنده رو ساختیم.

dark

نکته مورد توجه، اینه که ما توسط یک خاصیت animation، دو انیمیشن مختلف رو برای آیکونمون ساختیم که بهش قابلیت تپیدن، و تغییر رنگ رو می‌ده.

شما می‌تونین هر چند انیمیشنی که مدنظر دارید بسازید و فقط با یک ” , “، اونارو از هم جدا کنین:

animation: [مقادیر انیمیشن اول] , [مقادیر انیمیشن دوم] , [مقادیر انیمیشن سوم] , ... ;

ساعت

مثال زیر، یک مثال کاربردی و جذاب از انیمیشن هاست.

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

dark

تنها نکته انیمیشنی قابل توجه تو این مثال، استفاده از خاصیت animation-play-state برای متوقف کردن انیمیشن عقربه ساعته.

بیشتر نکته مربوط به طراحی عقربه با کمک HTML و CSS می‌شه که درک اون رو به خودتون می‌سپارم. سخت نیست، باحاله 🙂

یک نمونه از پاسخ پایان ترم

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

36873

همونطور که میبینیم، تو این مثال یک آدمک رقصنده ساخته شده که با فواصل زمانی خاص دست و پاهاشو تکون میده 🙂

پایان ترم

سوال:

یه انیمیشن خفن به دلخواه خودتون بسازین!

نکته: کد هاتون رو تو قسمت نظرات با نام “پاسخ کوییز مقاله ۷۸” آپلود کنین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

خب به انتهای فصل انیمیشن ها در آموزش جامع CSS می‌رسیم.

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

یک جهان بی انتها و دوست داشتنی 🙂

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

مدیر محتوا: علی اسمعیلی‌