Ещё 10 лет назад оформление сайтов было другим – интерактивным, анимированным и зрелищным (с технологией потоковой анимации). Это время, когда Flash + Action Script были королями WOW-эффекта. Почти для каждого моего проекта по созданию сайта я разрабатывал анимированную презентацию (как часть оформления главной страницы). С контролем режимов загрузки, но полной индексацией контента страницы.
Разработанное мной решение – модернизированный фреймворк (на основе стандартизированного от Adobe), служивший мне более 10 лет, позволял адаптивно сочетать сразу две технологии анимации в дизайне одной страницы. Его назначение – автоматически адаптировать вариант анимации в дизайне сайта под наличие или отсутствие плагина Adobe Flash в браузере пользователя. При наличии плагина – пользователю показывалась Flash анимация со сложным сценарием. А при отсутствии плагина – пользователь видел "упрощённую" HTML5 анимацию с JS или CSS. Сайт сам автоматически выбирал вариант кода страницы, подстраиваясь под браузер посетителя. При наличии плагина Adobe Flash Player в браузере, ещё можно найти действующие примеры в моём портфолио (сейчас уже большая редкость). Но без включённого плагина, будет показана только CSS-анимация.
Этот праздник технологий продлился до конца 2017 года, пока Google Chrome не прекратил постоянно существующую в браузерах поддержку Flash плагина на уровне движка Сhromium. (Почему? Тут есть аналитика). Моя технология сборки сайтов с двумя версиями адаптивной анимации потеряла смысл – в большинстве браузеров работала только CSS анимация.
Технологическая схема адаптивной анимации (я модернизировал фреймворк Adobe)
Пример презентационной Flash анимации:
Кадры анимации в мобильной версии сайта:
С появлением обязательного тестирования Core Web Vitals 2021 (при индексации сайта), скорость загрузки страницы стала очень важным параметром для продвижения сайта в поисковых системах. Существует ошибочное мнение, что главное для увеличения скорости и успешного прохождения тестов – это сократить графику на странице. И графическая анимация на сайте не нужна из-за SEO (разговоры про «минимализм»). Но вот наглядный пример того, что даже с графической CSS анимацией правильно собранный сайт великолепно проходит тесты на скорость загрузки!
Разработка логотипа для проекта:
После полной отмены поддержки Flash анимации в браузерах в 2019, технология двойной адаптивной анимации потеряла актуальность. И мне пришлось внедрять уже четвёртую версию анимации заглавной страницы сайта. Новая версия основана только на использовании CSS3, адаптивна под мобильные устройства и позволяет достигать 100% в тестировании Pagespeed Insights (под современные стандарты индексации Core Web Vitals 2021).
Пример современной версии CSS3 анимации:
Работы по проекту: разработка и комплексная поддержка сайта (с 2000 по 2023): анализ спроса и конкуренции, контент менеджмент, регулярный редизайн, смена технологий анимации и вёрстки, SEO, работа с поисковыми сервисами, индивидуальные графические материалы для сайта, контроль индексации сайта, техническая поддержка, настройка хостинга, политика аккаунтов.
👉 instagram.com/finest.ru (Instagram)
