ما در این سری به لودرها نگاه می کنیم. بیشتر از آن، ما در حال تجزیه برخی از الگوهای بارگذار رایج و نحوه ایجاد مجدد آنها با چیزی بیش از یک div هستیم. تا اینجا ما از هم جدا شده ایم لودر چرخان کلاسیک. حال، بیایید به یکی دیگر از مواردی که احتمالاً از آن آگاه هستید نگاهی بیندازیم: نقطه ها
نقطه لودرها در همه جا هستند. آنها مرتب هستند زیرا معمولاً از سه نقطه تشکیل شده اند که به نوعی شبیه یک متن بیضی (...) هستند که در اطراف می رقصند.
سری مقاله
- لودرهای تک عنصری: اسپینر
- لودرهای تک عنصری: نقاط - تو اینجایی
- لودرهای تک عنصری: میله ها - آینده 24 ژوئن
- لودرهای تک عنصری: سه بعدی شدن - 1 جولای در راه است
هدف ما در اینجا این است که همین مورد را از یک عنصر div واحد بسازیم. به عبارت دیگر، برای هر نقطه یک div یا انیمیشن جداگانه برای هر نقطه وجود ندارد.
نمونهای از لودر بالا با یک عنصر div، چند اعلان CSS و بدون شبه عناصر ساخته شده است. من دو تکنیک را با استفاده از CSS ترکیب می کنم background
و mask
. و وقتی کارمان تمام شد، خواهیم دید که چگونه متحرک سازی یک گرادیان پسزمینه به ایجاد توهم تغییر رنگهای هر نقطه با بالا و پایین رفتن متوالی کمک میکند.
انیمیشن پس زمینه
بیایید با انیمیشن پس زمینه شروع کنیم:
.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}
امیدوارم این خیلی ساده به نظر برسد. آنچه ما داریم یک است 180px
-وسیع .loader
عنصری که دو شیب مخروطی را نشان میدهد که رنگهای سخت را بین دو رنگ هر کدام متوقف میکند - گرادیان اول قرمز و آبی در امتداد نیمه بالایی است. .loader
، و شیب دوم سبز و بنفش در امتداد نیمه پایین است.
نحوه اندازه گیری پس زمینه لودر (200%
پهن)، ما در هر نیمه تنها یکی از آن رنگ ها را در هر زمان می بینیم. سپس این انیمیشن کوچک را داریم که موقعیت آن گرادیان های پس زمینه را برای همیشه و همیشه به چپ، راست و دوباره برمی گرداند.
هنگامی که با ویژگی های پس زمینه سروکار دارید - به خصوص background-position
- من همیشه به من مراجعه می کنم پاسخ Stack Overflow که در آن توضیح مفصل می دهم در مورد اینکه همه اینها چگونه کار می کند اگر با حقههای پسزمینه CSS ناراحت هستید، به شدت توصیه میکنم این پاسخ را بخوانید تا به آنچه در آینده میآید کمک کند.
در انیمیشن دقت کنید که لایه اول است Y=0%
(قرار گرفته در بالا) در حالی که X
تغییرات از 0%
به 100%.
برای لایه دوم هم همین رو داریم X
اما Y=100%
(در پایین قرار می گیرد).
چرا استفاده از a
conic-gradient()
بجایlinear-gradient()
?
سؤال خوبی بود! به طور شهودی، ما باید از یک گرادیان خطی برای ایجاد یک گرادیان دو رنگ مانند زیر استفاده کنیم:
linear-gradient(90deg, red 50%, blue 0)
اما ما همچنین می توانیم با استفاده از a به همان چیزی برسیم conic-gradient()
- و با کد کمتر. ما کد را کاهش می دهیم و همچنین یک ترفند جدید در این فرآیند یاد می گیریم!
لغزاندن رنگها به چپ و راست راه خوبی است برای اینکه به نظر برسد که در حال تغییر رنگ هستیم، اما بهتر است به جای آن فوراً رنگها را تغییر دهیم – به این ترتیب، هیچ شانسی وجود ندارد که نقطه لودر همزمان دو رنگ را چشمک بزند. . برای انجام این کار، اجازه دهید تغییر دهید animation
تابع زمان بندی از linear
به steps(1)
نقطه های لودر
اگر همراه با اولین مقاله از این مجموعه، شرط می بندم که می دانید بعد چه می شود: ماسک های CSS! چیزی که ماسکها را بسیار عالی میکند این است که به ما اجازه میدهند یکجوری کار کنیم بخشهایی از پسزمینه را «برش دهید». به شکل یک عنصر دیگر بنابراین، در این مورد، میخواهیم چند نقطه ایجاد کنیم، شیب پسزمینه را از طریق نقطهها نشان دهیم و هر قسمتی از پسزمینه را که بخشی از یک نقطه نیست، برش دهیم.
ما قصد استفاده از radial-gradient()
برای این:
.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}
مقداری کد تکراری در آن وجود دارد، بنابراین بیایید یک متغیر CSS بسازیم تا موارد را کاهش دهیم:
.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}
باحال باحال اما اکنون به یک انیمیشن جدید نیاز داریم که به جابجایی نقاط بین شیب های متحرک کمک می کند.
.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}
بله، در مجموع سه شیب شعاعی در آنجا وجود دارد، همه با یک پیکربندی و اندازه یکسان - انیمیشن موقعیت هر یک را به روز می کند. توجه داشته باشید که X
مختصات هر نقطه ثابت است. این mask-position
طوری تعریف شده است که اولین نقطه در سمت چپ باشد (0%
، دومی در مرکز (50%
و سومی در سمت راست (100%
). ما فقط به روز رسانی می کنیم Y
هماهنگ کردن از 0%
به 100%
برای رقص کردن نقطه ها
در اینجا چیزی است که ما دریافت می کنیم:
اکنون، این را با انیمیشن گرادیان ما ترکیب کنید و جادو شروع به اتفاق میکند:
تغییرات نقطه لودر
متغیر CSS که در مثال آخر ساختیم، تعویض رنگهای جدید و ایجاد تغییرات بیشتر از همان لودر را بسیار آسانتر میکند. به عنوان مثال، رنگ ها و اندازه های مختلف:
حرکت دیگری برای نقاط ما چطور؟
در اینجا، تنها کاری که من انجام دادم این بود که انیمیشن را برای در نظر گرفتن موقعیت های مختلف به روز کنم، و لودر دیگری با همان ساختار کد دریافت می کنیم!
تکنیک انیمیشنی که من برای لایههای ماسک استفاده کردم میتواند با لایههای پسزمینه نیز برای ایجاد تعداد زیادی لودر مختلف با یک رنگ استفاده شود. من یک مقاله مفصل در این مورد نوشتم. خواهید دید که از همان ساختار کد ما می توانیم تغییرات مختلفی را به سادگی با تغییر چند مقدار ایجاد کنیم. من چند نمونه را در پایان مقاله به اشتراک می گذارم.
چرا لودر با یک نقطه نیست؟
این یکی باید نسبتاً آسان باشد زیرا من از همان تکنیک استفاده می کنم اما با یک منطق ساده تر:
در اینجا یک نمونه دیگر از لودر است که در آن من نیز در حال انیمیشن هستم radial-gradient
همراه با فیلترهای CSS و mix-blend-mode
برای ایجاد افکت blobby:
اگر کد را بررسی کنید، خواهید دید که تمام کاری که من واقعاً در آنجا انجام می دهم، متحرک کردن است background-position
، دقیقاً مانند کاری که با لودر قبلی انجام دادیم، اما با اضافه کردن یک خط تیره background-size
تا به نظر برسد که لکه با جذب نقاط بزرگتر می شود.
اگر می خواهید جادوی پشت آن اثر لکه ای را درک کنید، می توانید به آن مراجعه کنید این اسلایدهای تعاملی (فقط کروم) توسط آنا تودور زیرا او موضوع را به خوبی پوشش می دهد!
در اینجا ایده دیگری برای بارگذاری نقطه وجود دارد که این بار از تکنیک متفاوتی استفاده می کند:
این یکی فقط 10 اعلان CSS و یک فریم کلیدی است. عنصر اصلی و دو عنصر شبه آن دارای پیکربندی پسزمینه یکسان با یک گرادیان شعاعی هستند. هر کدام یک نقطه ایجاد می کند که در مجموع سه نقطه است. این انیمیشن با استفاده از تاخیرهای مختلف برای هر نقطه، گرادیان را از بالا به پایین حرکت می دهد.
اوه، و توجه داشته باشید که چگونه این نسخه نمایشی از CSS Grid استفاده می کند. این به ما امکان می دهد از پیش فرض شبکه استفاده کنیم stretch
تراز کردن به گونه ای که هر دو عنصر شبه کل ناحیه والد خود را پوشش دهند. نیازی به سایز بندی نیست! اطراف را کمی فشار دهید translate()
و ما آماده ایم
نمونه های بیشتر!
فقط برای اینکه اصل مطلب را پیش ببرم، میخواهم چند نمونه اضافی را برای شما بگذارم که واقعاً تغییراتی از آنچه ما به آن نگاه کردهایم هستند. با مشاهده دموها، خواهید دید که رویکردهایی که در اینجا پوشش دادهایم، بسیار انعطافپذیر هستند و تعداد زیادی امکان طراحی را در اختیار شما قرار میدهند.
بعدی…
خوب، بنابراین ما در این مقاله به لودرهای نقطهای و در مقاله آخر به اسپینرها پرداختیم. در مقاله بعدی از این مجموعه چهار قسمتی، ما توجه خود را به نوع رایج دیگری از لودر معطوف خواهیم کرد: میله ها ما بسیاری از چیزهایی را که تا کنون آموختهایم میگیریم و میبینیم که چگونه میتوانیم آنها را گسترش دهیم تا یک بارکننده عنصر واحد دیگر با کمترین کد و انعطافپذیری بیشتر ایجاد کنیم.
سری مقاله
- لودرهای تک عنصری: اسپینر
- لودرهای تک عنصری: نقاط - تو اینجایی
- لودرهای تک عنصری: میله ها - آینده 24 ژوئن
- لودرهای تک عنصری: سه بعدی شدن - 1 جولای در راه است
Single Element Loader: The Dots در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.
- "
- 10
- 3d
- 7
- 9
- a
- درباره ما
- اضافی
- معرفی
- اجازه می دهد تا
- همیشه
- دیگر
- پاسخ
- جدا
- رویکردها
- محدوده
- دور و بر
- مقاله
- توجه
- زمینه
- بار
- زیرا
- قبل از
- میان
- بزرگتر
- دسته
- مورد
- تغییر دادن
- کروم
- کلاسیک
- رمز
- ترکیب شده
- مشترک
- پیکر بندی
- در نظر بگیرید
- گروه شاهد
- مختصات
- پوشش
- ایجاد
- ایجاد
- خط تیره
- معامله
- تاخیر
- طرح
- دقیق
- DID
- مختلف
- پایین
- راندن
- هر
- اثر
- به خصوص
- کاملا
- مثال
- مثال ها
- گسترش
- نام خانوادگی
- ثابت
- انعطاف پذیری
- قابل انعطاف
- برای همیشه
- از جانب
- تابع
- دادن
- هدف
- رفتن
- بزرگ
- سبز
- توری
- رخ دادن
- کمک
- کمک می کند
- اینجا کلیک نمایید
- خیلی
- صفحه اصلی
- امید
- چگونه
- چگونه
- HTTPS
- اندیشه
- در دیگر
- فرد
- تعاملی
- IT
- جولای
- دانستن
- برچسب ها
- لایه
- یاد گرفتن
- آموخته
- ترک کردن
- قدرت نفوذ
- احتمالا
- کوچک
- بار
- نگاه کنيد
- نگاه
- به دنبال
- ساخته
- حفظ
- ساخت
- باعث می شود
- ماسک
- ماسک
- قدرت
- بیش
- حرکت
- جنبش
- بعد
- باز کن
- دیگر
- بخش
- نقطه
- موقعیت
- فرصت
- ممکن
- زیبا
- قبلی
- املاک
- رسیدن به
- مطالعه
- توصیه
- كاهش دادن
- همان
- مقیاس
- سلسله
- تنظیم
- شکل
- اشتراک
- ساده
- تنها
- اندازه
- So
- برخی از
- شروع
- شروع می شود
- تکنیک
- La
- چیز
- اشیاء
- سه
- از طریق
- زمان
- لحن
- بالا
- موضوع
- فهمیدن
- بروزرسانی
- us
- استفاده کنید
- معمولا
- چشم انداز
- چی
- در حین
- کلمات
- با این نسخهها کار
- X