متحرک سازی ذرات  با css

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

متحرک سازی ذرات رنگین کمان

این نوشته در مورد نمایش یک ترفند ویژه جالب است: برای حرکت تمام این ذرات رنگین کمان در صفحه نمایش فقط از یک مجموعه keyframe استفاده شده! یک دوم آن ها مسئول محو شدن ذرات هستند. اما حتی اگر در نقطه دیگری از صفحه نمایش محو شوند، تنها یک مجموعه از keyframe ها مسئول آن است.
بیایید ببینیم چطور کار می کند!

ساختار

ما تنها ۴۰۰ ذره در body رها کرده ایم. من از Haml استفاده کرده ام چون احساس می کنم ساده ترین راه را برای ایجاد حلقه فراهم می کند. بدون اینکه بخواهیم از متغیر های حلقه استفاده کنیم. توجه داشته باشید که این به سلیقه شخصی افراد بستگی دارد. تمایل من به پیش پردازنده است به این خاطر که با کد کمتر نتیجه ای را که می خواهم نشان می دهد. هرچه کمتر بنویسم، بهتر است. در این مورد خاص، این در Haml اتفاق می افتد. اما در پایان روز هر پردازنده ای که به شما امکان ایجاد تمام عناصر را در یک حلقه بدهد، خوب کار میکند.

کد html

استایل های عمومی

اولین چیزی که انجام می دهیم اندازه و موقعیت ذرات است. من آن ها را مربع های ۴*۴ انتخاب کرده ام. چون نگاه من پیکسلی است.

کد css

 

موقعیت تصادفی روی صفحه نمایش

ما این ۴۰۰ ذرات رنگین کمان را در حلقه می گذاریم (توجه داشته باشید که تعداد در حلقه for در scss باید به همان اندازه در حلقه Haml باشد) و ما تنها نقاط تصادفی x و y را مشخص می کنیم. X بین ۰ و ۱۰۰vw و y بین ۰ و ۱۰۰vh است. (Random(100 به ما اعداد صحییح بین ۰ تا ۱۰۰ میدهد.

در همین زمان، ما به این ذرات رنگین کمان background های مختلف تصادفی میدهیم تا بتوانیم آن ها را ببینیم. به خاطر راحتی از فرمت hsl() استفاده می کنیم. (Random(360 تمام دایره رنگ را می پوشاند و اعدادی بین ۰ و ۳۶۰ می دهد.

دایره رنگ

پس از آن ما اشباع (saturation) را ۱۰۰%  قرار می دهیم و برای روشنایی(۵۰%)lightness  و بالاتر (در این مثال ۶۵%).

کد css

حالا می توانیم توزیع ذرات در سراسر صفحه نمایش را ببینیم.

آن ها پیمایش را آغاز میکنند بنابراین ما در عنصرroot، overflow را hidden قرار می دهیم. و یک پشت زمینه تیره به آن می دهیم تا بتوانیم ذرات رنگین کمان را بهتر ببینیم.

کد css

به این ترتیب، یک آسمان شب بسیار زیبا خوهیم داشت:

متحرک سازی

گام بعدی این است که ذرات رنگین کمان را متحرک کنیم، و از وسط صفحه نمایش شلیک کنیم. این به این معنی است که انیمیشن ما از نقطه ۵۰vw و ۵۰vh شروع می کنیم.

کد css

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

ما می خواهیم ذرات رنگین کمان ابتدا سریع و سپس آهسته حرکت کنند. بنابراین باید از یک تابع از نوع زمان استفاده کنیم. می توانیم از نوع ساده و قدیمی یا نوع پیشرفته آن استفاده کنیم (من easings.netرا ترجیح داده ام). و بعد برای متحرک سازی مدت زمان ۳ ثانیه می دهیم و infinite قرار می دهیم تا بی نهایت بار تکرار شود.

کد css

نتایج زیر بدست می آید:

شلیک ذرات رنگین کمان در موقعیت های مختلف، همان چیزی است که می خواستیم. اما همه آن ها یک بار متحرک می شوند که این چیزی نیست که ما می خواستیم. بنابراین در مرحله اول باید به هر کدام زمان تصادفی مختلف بین ۱ تا ۳ ثانیه بدهیم و آن را در حلقه تکرار کنیم.

کد css

این بسیار بهتر است:

سپس به هر کدام از ذرات رنگین کمان یک تاخیر تصادفی منفی بین ۰ تا ۱۰۰% از زمان انیمیشن (t$) در قدر مطلق می دهیم:

کد css

در نهایت، ما از ذرات رنگین کمان نمی خواهیم که ناپدید شوند بنابراین متحرک سازی دیگر برای ناپدید شدن اضافه می کنیم(با همان زمان و همان تاخیر):

کد css

نتیجه نهایی:

می توانید این فرایند را برای حروف و کاراکتر های مختلف هم انجام دهید؟

برای مشاهده نمونه فعالیت های فناوری مشهد آی تی در جهت برند سازی تجاری در فضای شبکه های اجتماعی اینجا کلیک کنید

ارسال پاسخ