Wpis z mikrobloga

#webdev

W jakiej technologii jest zrobiona animacja na tej stronie -> https://itmatch.pl/

Nie spotkałam się z czymś takim jak data-start="610 127", data-waypoints="447 340, 318 416, 251 377, 81 277"
Tak w ogóle to niby to jest canvas a nie mogę znaleźć żadnego skryptu sterującego nim. Widzę tylko animacje poszczególnych elementów w css.
ZacmienieKsiezyca - #webdev

W jakiej technologii jest zrobiona animacja na tej str...

źródło: comment_15871075789kqoVAFibMzkXO82f6JZNG.jpg

Pobierz
  • 5
@ZacmienieKsiezyca: to jest najpewniej kilka elementów SVG + jakiś ich autorski skrypt (swoją drogą nic skomplikowanego na tej animacji nie ma), natomiast atrybuty data-* zwyczajnie przechowują jakieś dane, zapewne wykorzystywane przez ten skrypt.

Jeżeli czegoś będzie mi brakowało z mojej byłej, januszowej firmy ecommerce to właśnie wdrażania takich pierdółek, które sobie jakiś artysta wymyślił ( ͡° ͜ʖ ͡°)
@ZacmienieKsiezyca: w przypadku ikonek laptopów, budyneczków i innych ikonek to jest po prostu sprytne manipulowanie CSS Transforms i opacity (1: https://css-tricks.com/almanac/properties/t/transform/ 2: https://css-tricks.com/almanac/properties/o/opacity/) i "załączanie" ich widoczności przy użyciu klasy .active, zapewne o czasie podanym tym atrybucie data-start.

Natomiast linie są rysowane już na canvas: https://www.kirupa.com/html5/creating_simple_html5_canvas_animation.htm
Zapewne każda linia rysowana jest jako zupełnie oddzielna jednostka i do określenia, która, jak i kiedy ma się animować, wykorzystywane są te puste