Zrobiłem dzisiaj ficzer do Wykopu dodający animację plusowania (zobacz... (@WykopX)

Zrobiłem dzisiaj ficzer do Wykopu dodający animację plusowania (zobacz GIF-a)

Może być? Ciekawy jestem waszych opinii (⌐ ͡■ ͜ʖ ͡■)

https://greasyfork.org/en/scripts/458860-eksplozja-plusow
https://userstyles.world/style/8174/wykop-x-style

Po nagraniu gifa na PC sprawdziłem działanie na telefonie i tam wygląda to trochę lepiej ale już mi sie nie chciało nagrywać od nowa xD

Trochę technicznych rzeczy:

Animacja jest losowo generowana w zalezności od liczby plusów
- dla mniejszej liczby plusów plusy są podrzucane do góry
- dla większej liczby nastepuje eksplozja plusów

- wygląd eksplozji plusów generowany jest losowo z CSS custom properties:

Niestety w CSS nie ma funkcji radialnej, która przesuwa elementu używajac wartości "odległość" oraz "kąt" w stopniach, trzeba korzystać z układu współrzędnych <x, y, z>

Transformacja 3D

transform: translate3d(var(--x), var(--y), var(--z));
Właściwości animacji CSS też są generowane osobno dla każdego plusa, zarówno czas wyświetlania, opóźnienie eksplozji plusa, jego szybkość i odległość:

   animation-duration: var(--explosionDuration);
   animation-timing-function: var(--explosionTiming);
   animation-delay: var(--explosionDelay);

- wartości x, y (kierunek eksplozji) generowany dynamicznie.

if (count > 666 && getRandomInt(1, 10) == 1) color = "golden";
if (count > 100 && getRandomInt(1, 30) == 1)  {
   min_x += getRandomInt(-30, 30); max_x += getRandomInt(-30, 30)
   min_y -= getRandomInt(-30, 30); max_y -= getRandomInt(-30, 30);
}

plus.style.setProperty('--x', getRandomInt(min_x, max_x, "px"));
plus.style.setProperty('--y', getRandomInt(min_y, max_y, "px"));

if (count > 30) {
   plus.style.setProperty('--explosionTiming', getRandomString("linear", "ease", "ease-in-out", "ease-in", "ease-out", "cubic-bezier(0.1, 0.7, 1, 0.1)"));
   plus.style.setProperty('--explosionDelay', getRandomInt(0, getRandomInt(0, Math.max(800, count)), "ms"));
   plus.style.setProperty('--explosionDuration', getRandomInt(900, 1300), "ms");
}