کدهای جذاب و دیدنی ( Preloading Space Animation ) : لودر انیمیشنی زیبا مرتبط به فضا

زمان مطالعه: 2 دقیقه
۲۱ مهر ۱۳۹۶

در این قسمت میخوام یک کد ( Preloading Space Animation ) جالب رو در اختیارتون بزارم.

کدهای جذاب و دیدنی ( Preloading Space Animation ) : لودر انیمیشنی زیبا مرتبط به فضا

توضیحات مربوط Preloading Space Animation

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

همونطور که میبینید زمانی که این کره ها با هم برخورد میکنن یک حالت چسبنده یا Gooey به وجود میاد. این کار با استفاده از SVG انجام میشه:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <fegaussianblur in="SourceGraphic" stddeviation="15" result="blur"></fegaussianblur>
      <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 26 -7" result="goo"></fecolormatrix>
      <feblend in="SourceGraphic" in2="goo"></feblend>
    </filter>
  </defs>
</svg>

میبینید که یک filter تعریف کردیم و در اون از فیلترهای feGaussianblur و fecolormatrix و feblend استفاده کردیم. برای این filter یک id بنام goo قرار دادیم. حالا میتونیم در CSS این فیلتر رو به المنتهای مورد نظرمون اعمال کنیم تا در هنگام برخورد بصورت چسبنده به نظر بیان. بصورت زیر:

.game-loader__planet {
  -webkit-filter: url("#goo");
          filter: url("#goo");
  position: relative;
  width: 100vw;
  height: 100vw;
}

به همین راحتی.

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

موفق باشید.

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل