آموزش ساخت لودینگ page loading با css

آموزش ساخت منوی کشویی یا canvas منو با jquery
آموزش ساخت منوی کشویی یا canvas منو با jquery
۱۲ اسفند ۱۳۹۸
توابع بازگشتی در جاوا اسکریپت
آموزش توابع بازگشتی در جاوا اسکریپت
۱۲ اردیبهشت ۱۳۹۹
آموزش ساخت لودینگ page loading با css

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

در این مقاله کوتاه قصد دارم به شما آموزش ساخت چند تا لودینگ ساده که فقط با Css خام میشه ایجادش کرد رو آموزش بدم البته شاید این لودینگ ها براتون کاربردی یا جالب نباشن اما من میخوام با روند کارشون و همچنین نحوه ایجاد یک انیمیشن در css آشنا بشین و نیازی نیست که برای پروژه های خودتون page loading بنویسید چون با یه سرچ کوتاه کلی نمونه کد و نمونه لودینگ رو به راحتی میتونید دانلود و ازشون استفاه کنید. ولی قبلش باید اون کدی رو که دارین ازش استفاده میکنید رو درک کنید شاید مجور شدین یه قسمت هایشو تغییر بدین. امیدوارم که این مقاله آموزشی مورد توجه تون قرار بگیره و بتونه تو خیلی موارد مشکل گشا باشه براتون.

آموزش ایجاد انیمیشن در css و آشنایی با keyframes@

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

برای شروع به کد های زیر دقت کنید
همون طوری که در کد های بالا می بینید ما با from تعیین می کنیم که رنگ پس زمینه از حالت قرمز در to به حالت زرد برسه به همین آسونی می تونید خروجی اون رو هم در پایین ببینید.

همون طوری که در کد های بالا می بینید ما با from تعیین مکنیم که رنگ پس زمینه از حالت قرمز در to به حالت زرد برسه به همین آسونی می تونید خروجی اون رو هم در پایین ببینید.

خروجی کد بالا


خب حالا می تونید این انیمیشن رو طور دیگه ایجاد کنید یعنی به غیر از استفاده از from یا to می تونید از طریق واردکردن درصد نیز روند انجام این نوع انیمیشن رو تعیین کنید به کد های زیر دقت کنید .حالا همین کار رو مثلا با استفاده از درصد براتون انجام میدم تا با این دو موضوع به خوبی آشنا بشین

همون طوری که درنمونه بالا می تونید ملاحظه کنید این انیمیشن در لحظه یا درصد ۰ به رنگ آبی هستش تا درصد ۲۵ ، بعد در ٪ ۲۵ به رنگ زرد تغییر پیدا میکنه و تا %۵۰ همون طوری میمونه و در %۵۰ به رنگ سبز تغییر می کنه و در نهایت در ٪۱۰۰ به رنگ قرمز تغییر پیدا خواهد کرد البته این فرایند به صورت خیلی آهسته اتفاق میافته و یک دفعه شاهد تغییر رنگ نیستیم.

خروجی کد بالا رو در بخش پایین مشاهده میکنید :

خروجی


در نهایت اون رو به یک Class یا ID نسبت میدیم تا اجرا بشه نمونه شو در پایین براتون آوردم

دوستان عزیر توجه کنید که بحث انیمیشن ها فقط همین نیست و نیاز به توضیح بیشتر داره برای همین این مبحث رو توی یه پست دیگه آموزش میدم و اینجا فقط نکاتی رو گفتم که فعلا بهش احتیاج داریم و وارد سایر جزئیات انیمیشن ها نمیشم پس اگر هنوز بحث animation رو متوجه نشدین مقاله مربوط به انیمیشن ها رو مطالعه کنید.

ساخت اولین لودینگ

مرحله اول نوشتن کد های html

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

همون طوری که مشاهده میکنید ما یک تگ div با کلاس loging2 تعریف کردیم که پنج تا تگ دیگه داخلش هست که برای این تگ ها کلاس load رو در نظر گرفتم و استایل های Css این لودینگ رو در قسمت پایین براتون قرار دادم.

مرحله دوم نوشتن کد های css

بعد از نوشتن کد های html حالا نوبت به این میرسه که برای اون کلاس هایی که در html نوشتیم استایل Css بنویسیم تا ظاهر اون قابل ارائه باشه چون بدون این کد ها عملا کدهای html بی فایده هستن
خب حالا برین کدهای زیر رو کپی کنید توضیحات شو پایین کد ها براتون نوشتم .

همون طوری که ملاحظه می کنید در کد های بالا ما برای ۵ تا تگی که کلاس load دارن از یه استایل مشترک استفاده کردیم که مشخص میکنه این تگ ها animation-name اون ها چی باشه یعنی ما با استفاده از keyframes@ که در بالا توضیح شو خدمتتون عرض کردم یک انیمشین تعریف میکنیم و بعدش از طریق خاصیت animation-name انیمشینی رو که برای اون تگ ها در نظر گرفتیم بهشون نسبت میدیم و از طریق خاصیت animation-duration زمان اجرای اون انیمشین رو مشخص میکنیم و سپس از طریق خاصیت animation-iteration-count تعداد دفعات اجرای هر انیمشین رو مشخص میکنیم که فعلا همین سه تا مورد کار ما رو راه میندازه البته خاصیت های دیگه هم داره که برای اینکه سردرگم نشین در حال حاضر این مباحث رو مطرح نمیکنم. بعد از تعریف این موارد که به صورت مشترک برای کل تگ های div با کلاس load بودن حالا برای تک تک این تگ ها به صورت جداگانه یه سری استایل درنظر گرفتیم و با استفاده از load:nth-child(n) رنگ هر تگ رو مشخص کردیم که البته یه نکته ای که وجود داره این هستش که هر تگ یه animation-delay داره که مشخص میکنه این انیمیشن با یه تاخیر اجرا بشه که اگه خروجی رو ببینید خودتون متوجه موضوع میشید

تعریف انیمیشن مورد نظر از طریق keyframes@

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

خروجی کد های بالا به شکل زیر است

See the Pen
Walkers – How to
page loading – (@mohammadYazdanpanah)
on CodePen.

آموزش ساخت دومین لودینگ دایره ای

مرحله اول نوشتن کد های html

 

اگه بخوام کد های بالا رو توضیح بدم ما یک div با کلاس center-lo داریم که بعنوان parent بقیه div ها هستش که بقیه المان ها با کلاس load داخل اون قرار دارن

نوشتن کد های css

بعد از نوشتن کد های html  حالا باید بهشون استایل css بدیم اولین کاری که باید انجام بدیم دادن استایل به تگ div با کلاس center-lo که نقش parent بقیه تگ ها رو داشت من نمیخوام استایل های این تگ رو توضحی بدم چون همه چی مشخصه و فقط میخوام برم سراغ استایل های اصلی این لودینگ میتونید کد های زیر رو کپی کنید و توی فایل Css خودتون بزارین

مهم ترین نکته ای که باید در این مرحله بهش دقت کنید استایل های تگ های با آیدی load1 تا load5 هستش که نقش پنج تا دایره ی این انیمشین رو ایفا می کنن که اگه بخوام درمورد استایل ها شون توضیح مختصری بدم ما ابتدا اندازه و رنگ شون و بقیه استایل ها که خودتون مستحضر هستید رو مشخص میکنیم فقط نکته قابل توجه اینه که animation-name برای مشخص کردن نام انیمیشنی هستش که رو این تگ اعمال شده و همچنین animation-duration برای مشخص کردن زمان اجرای این انیمیشن مورد استفاده قرار میگیره . در پایان توضیحات گزینه animation-iteration-count هم یعنی این انیمیشن چه مقدار باید طول بکشه که ما مقدار شو برابر با infinite قرار دادیم که به معنی بی نهایت هستش.

تعریف انیمیشن مورد نظر از طریق keyframes@

 

در نهایت باید خروجی شما شبیه کد زیر باشه

 

See the Pen
Walkers – How to
page loading – (@mohammadYazdanpanah)
on CodePen.

دیدگاهتان را بنویسید

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

چهار × 5 =