Анимированные баннеры и загрузка

12
Жорик
На сайте с 11.09.2006
Offline
168
244

Есть кто профессионально делает анимированные баннеры или просто анимации?

Вопрос такой: если тырнет медленный, то, наверное, неплохо бы сначала дождаться загрузки всех элементов анимации (svg, картинки), а потом уже начинать её. Особенно, если это реклама.

А то криво может выглядеть. Такое практикуется или пофиг? Или, может, достаточно preload сделать для критичных изображений (как вариант вообще встроить изображения в HTML, но по-моему это не bad practice)? Ща интернет в основном быстрый же.

Cuys
На сайте с 05.12.2016
Offline
195
#1
Жорик :
Есть кто профессионально делает анимированные баннеры или просто анимации?

Буквально час назад для своего проекта отрисовал баннер формата 468x60 с .gif анимацией, вес файла 39кб. Использовал формат 2D/3D через макромедия .flash (уж люблю этот формат, сколько на ней анимаций сделал не засчитать - круче любой темы).

Жорик :
Вопрос такой: если тырнет медленный, то, наверное, неплохо бы сначала дождаться загрузки всех элементов анимации (svg, картинки), а потом уже начинать её. Особенно, если это реклама.

У вас извиняюсь за вопрос - сайт на чём сделан - ну там вордпресс, опенкарт, дле и прочее, или ларавелы или самописы?

Жорик :
А то криво может выглядеть.

Криво что может выглядеть?

Cuys
На сайте с 05.12.2016
Offline
195
#2
Жорик :
Ща интернет в основном быстрый же.

Да - интернет сейчас в основном быстрый..

Жорик
На сайте с 11.09.2006
Offline
168
#3
Cuys #:
У вас извиняюсь за вопрос - сайт на чём сделан - ну там вордпресс, опенкарт, дле и прочее, или ларавелы или самописы?

В данном случае это не важно на чем сделан. Баннер - это отдельная сущность.

Cuys #:
Криво что может выглядеть?

Да, часть загрузилась SVG/PGN/JPG, часть нет... а анимация началась 😀

P.S.: Я про баннеры с CSS-анимацией.


Cuys
На сайте с 05.12.2016
Offline
195
#4
Жорик #:
P.S.: Я про баннеры с CSS-анимацией.

Ааа - так сайт то ваш на чём сделан? Спросил выше...

Понял - инклудом чтоль балуетесь?

Жорик
На сайте с 11.09.2006
Offline
168
#5
Cuys #:
Понял - инклудом чтоль балуетесь?

Баннер может загружаться вообще с другого ресурса, того же AdFox. Кроме того html/css все CMS позволяют вставлять в плагины-фигагины.

Считайте, что сайты у меня самописные чтобы не уходить в дебри :)

P.S.: Кстати, узнал тут про Adobe Animate - хорошая штука для баннеров? Только я пока не понял в каком формате там получается...

Cuys
На сайте с 05.12.2016
Offline
195
#6
Жорик #:
P.S.: Кстати, узнал тут про Adobe Animate - хорошая штука для баннеров? Только я пока не понял в каком формате там получается...

Посмотрите пару тем на Ютубе, тема вполне рабочая и адекватная (думаю даже станет интересно экспериментировать), это я как старичёк привык пользоваться своими инструментами, у меня уже рука набита так сказать (плюс использование Action sript внутри локации / баннера), поэтому ничего нового я не вижу нигде и никогда. Всё то же самое, но со своими приколами.

В своё время принимал участие в .flash чемпионате - когда это было ещё так популярно, в Китае занял 8-е место по разработке анимации к сайту (это сейчас говорят одностраничник - лендинг), а раньше это было просто выступление формата - анимация страницы (页面动画).

Фишка была ещё написать музыку для кнопок меню - типо при нажатии они издавали звуки и т.д. согласно дизайну. После этого кстати и вдарился в писанину электронной музыки )) Сейчас это уже история - но тогда было - да - круто - слетать в условные 23 года в Китай и принять участие в закрытом аля чемпионате.

Было дело конечно..

Ладно я что-то отошёл от нашего вопроса. В общем насчёт медленного интернета не заморачивайся - так как он по факту грузит нормально (в плане интернет сейчас не 2001 года когда сидели по карточкам модема). Баннеры бывают разных размеров: от кнопок 88x31 / заканчивая 1000x80 (есть общий стандарт разработки баннеров которыми пользуются очень многие люди). Соблюдай простое правило - чем меньше весит баннер - тем лучше. Но так же не забывай про качество анимации, чтобы уж конкретно не было пиксельной ерунды, а пользователь мог адекватно его воспринимать в цветовом диапазоне и уже тем более читать текст.

Жорик
На сайте с 11.09.2006
Offline
168
#7
Cuys #:
Соблюдай простое правило - чем меньше весит баннер - тем лучше. Но так же не забывай про качество анимации

Все это соблюдаю, естественно. Ок, может я слишком действительно заморочился 🤡 Пошел дальше кодить 🧒

Спасибо! 👍

D.iK.iJ
На сайте с 26.05.2013
Offline
225
#8

Вообще не вижу проблемы на какую-то из тяжелых картинок повесить onload и стартовать анимацию по загрузке.

Прелоад... взял картинку, размыл немного, прогнал через squoosh.app до нужного размера, поставил на фон через CSS. Ну вроде тоже не сложно.

Нужна предзагрузка? Добавил в шапке

<link rel="preload" as="image" href="important.png">

Ну или более старый CSS вариант

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}
Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
Жорик
На сайте с 11.09.2006
Offline
168
#9
D.iK.iJ #:
Вообще не вижу проблемы

Да нет проблем, как запрогать всё это я прекрасно знаю. 👌

Вопросы был не КАК сделать, а ПРАКТИКУЕТСЯ ли такое 😊

D.iK.iJ
На сайте с 26.05.2013
Offline
225
#10
Жорик #:

Вопросы был не КАК сделать, а ПРАКТИКУЕТСЯ ли такое 😊

Блин. У меня в телефоне сильно медленный бесплатный интернет (128кбит/c). Я обычно готов спасибо сказать каждому, кто хоть немного подумал про пользователей с тормознутым соединением. ))

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий