DotDash
@DotDash
•••• • •−•• •−•• −−− •−− −−− •−• •−•• −•• −−••−−

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

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

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

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

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

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

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

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

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

Войти через центр авторизации
Похожие вопросы