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

Question

[DotDash]

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

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

Кто бывал в такой ситуации, как лучше поступить? Как по производительности?

Answer 1

[Александр Севиринов]

Лучше конечно CSS +SVG
gif на весь экран и видео слишком громоздкие получатся.

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

Вариантов куча, пользуйтесь поиском

Answer 2

[Exploding]

Лучше, правильней и логичней поступить так:
- открыть топку;
- закинуть туда этот прелоадер с летающей бабочкой на весь экран;
- закрыть топку.

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

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

Comments

[DotDash]

Тут главная анимация. Прелоадер для бабочки, а не бабочка для прелоадера.

[Exploding]

DotDash, это не меняет сути) скорость загрузки не должна позволять использовать прелоадер страницы в принципе.
Ajax-прелоадер в блоке - другое дело.

[DotDash]

Exploding, Антон Прохоров, да нет же, пользователь хочет заставку бабочку перед загрузкой, т.к. на логотипе здоровая бабочка.
Просто побочная функция заставки - прелоадер, но заставка вне зависимости от скорости загрузки будет играть.

[Exploding]

DotDash, Вот кто-кто, а пользователь как раз и НЕ хочет никаких заставок-бабочек! Он хочет побыстрее увидеть то, ради чего зашел на сайт - информацию. Гугл - тоже абсолютно НЕ хочет видеть заставок и прелоадеров (еще вопрос как оно там все будет реализовано).
Заказчик - единственный человек, кого эта идея так прёт и кому нужны эти заставки и бабочки.
Ну "хозяин-барин" и если так, я бы наверно не парился особо, а просто нашел качественную и не тяжелую гифку бабочки и на css ее уже анимировал. Хуже уже не будет, а силы зря тратить на ее более сложную реализацию - не вижу смысла. Тем более, что скорее всего, летать ей не долго))