Задать вопрос
DotDash
@DotDash
•••• • •−•• •−•• −−− •−− −−− •−• •−•• −•• −−••−−
верстка

Прелоадер JS, gif или видео?

Стоит задача перед загрузкой сайта сделать анимацию: летающую бабочку по всему экрану на белом фоне, которая исчезает после окончания и появляется сам сайт.

Вроде бы обычный прелоадер, но задействуется весь экран, потому обычная гифка не подойдет.
Делать гифку на весь экран глупо. либо сделать гифку и перемещать её js-ом.
Либо скинуть на фриланс, чтобы css3-бабочку сварганили.
Либо запилить видео где бабочка летает.

Кто бывал в такой ситуации, как лучше поступить? Как по производительности?
  • Вопрос задан
  • 1939 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
sevirinov
@sevirinov
Web Developer
Лучше конечно CSS +SVG
gif на весь экран и видео слишком громоздкие получатся.

А готовых CSS бабочек предостаточно, не думаю что потребуется заказывать на фрилансе, можно просто "подпилить" под свои нужды. Вот например отличный вариант или вот или можно взять вот эту и самому задать нужную траекторию движения.

Вариантов куча, пользуйтесь поиском
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Exploding
@Exploding
wtf?
Лучше, правильней и логичней поступить так:
- открыть топку;
- закинуть туда этот прелоадер с летающей бабочкой на весь экран;
- закрыть топку.

Наличие прелоадера может означать только одно: у нас настолько медленный сайт, что пока грузится страница - вы можете сделать себе чай или по-наблюдать как летает бабочка. Повлиять на скорость загрузки - нет, этого мы не умеем ¯\_(ツ)_/¯

Ваша страница должна загружаться настолько быстро, чтобы необходимость в прелоадере отпала сама собой и единственным вариантом посмотреть на него, было намеренное "оттягивание" отображения страницы. Но это заболевание не смертельно и проходит само со временем.
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка игры нарды
25 апр. 2024, в 15:31
70000 руб./за проект
Верстка мобильной версии на SvelteKit [FIGMA]
25 апр. 2024, в 15:26
15000 руб./за проект
Сделать ретопологию 3D моделей в Blender
25 апр. 2024, в 15:13
3000 руб./за проект
Ещё заказы