Animowany preload z logo
📌 Zadanie:
Opracować preloader dla strony internetowej z animacją logo. Logo jest dołączone w załączniku (SVG/PNG). Animacja powinna imitować rozsuwanie i zamykanie pudełka, tworząc efekt przestrzenności (wrażenie 3D).
🎬 Scenariusz animacji:
Logo znajduje się na środku ekranu, zajmuje około 30% szerokości okna (adaptacyjnie, ± nie krytycznie).
Animacja zaczyna się od tego, że logo rozsuwane jest "z" centrum, jakbyś patrzył z góry na otwierające się pudełko.
Części logo pojawiają się naprzemiennie, z lekkimi obrotami 3D.
Po pełnym złożeniu — pauza 0,5–1 sekundy.
Następnie logo animacyjnie "zamyka się" z powrotem do centrum — w tej samej kolejności, co się rozkładało.
Animacja powtarza się nieskończenie, dopóki nie załaduje się główna strona.
Po załadowaniu — preloader płynnie znika (fade out) i jest usuwany z DOM.
💡 Wymagania techniczne:
HTML + CSS + JavaScript.
Bez użycia bibliotek zewnętrznych (GSAP, jQuery itp.) — jeśli to możliwe.
Maksymalnie lekki i szybki w ładowaniu (priorytet — wydajność).
Logo musi być zrealizowane jako SVG, podzielone na osobne elementy animowane.
Wszystkie kolory logo zachować dokładnie, jak w oryginale.
Kod musi być łatwo osadzalny na dowolnej stronie (najlepiej w formie jednego kontenera + skrypt/styl).
🧩 Dodatkowo:
Chętnie udostępnię dodatkowe szczegóły i wyjaśnienia logiki tym, którzy będą zainteresowani projektem.
Załączniki 2
-
562 7 0 Witaj! Stworzę animację logo, z użyciem html, css, js (bez bibliotek zewnętrznych), według metodologii BEM.
Szczegółowe wytyczne omówimy w wiadomościach prywatnych.
-
вообще хорошо когда страница загружается меньше/равно 1 секунде.
вы хотите анимацию на половине которой 0.5-1 секунда, это сколько планируется чтобы страница грузилась не менее 3-х секунд?
если вы хотите отработать какой-то сценарий анимации логичнее сделать просто заведомо показ предоадера в течении хотя бы полностью одного цикла без разницы за 0.5 секунды загрузилась страница или больше.
а то хотите анимацию которая при быстрой загрузки страницы мелькнёт непонятно чем и как что бывает хуже чем просто вид сайта прка он прогружается.
-