HTML страница, встроенная в анимированный GIF / Хабр
Началось с того, что я случайно наткнулся на станицу https://lcamtuf.coredump.cx/squirrel/
Это демка представляет собой файл, который будучи сохраненным с расширением .jpg или .jpeg открывается как графический файл, а с расширением .htm или .html как веб-страница. Такого рода трюки для JPEG не новы. Насколько я понял, HTML размещается в секции комментария .jpeg файла. Браузер проглатывает бинарные данные заголовка как мусор, потом рендерит найденный HTML. Немного CSS хитрости чтобы спрятать бинарный мусор от глаз пользователя и вуаля.
Я вооружился редактором Hex Fiend для Mac и довольно быстро смог заменить HTML и изображение на свои.
Страница https://lcamtuf.coredump.cx/squirrel/ открытая Hex FiendЯ был весьма доволен собой, но мне хотелось продолжить двигаться в этом увлекательном направлении ненормального программирования.
Мне пришла в голову мысль, что можно попробовать провернуть такое с .gif файлом.
Я погуглил, оказалось что такого с .gif файлом никто не делал. Некоторое время я бился с Hex Fiend пока не достиг первых успехов. Стало ясно, что затея реализуема.
Я решил сразу взяться за что-то весомое, и решил что буду использовать анимированный GIF.
По моей просьбе жена снабдила меня занятным видео, которое я на скорую руку обработал и получил следующее:
Из него я сохранил анимированный GIF:
The movie: Time TravelПросто дописываем HTML в конец .gif файлаБинарный мусор попадая в браузер открывает большое количество тегов <s>,<u> и <i> поэтому, если вы захотите повторить мои упражнения, я советую их с запасом позакрывать в самом начале, как видно на скриншоте выше, или в исходниках моего файла, ссылку на который я дам в конце поста.
Верстая веб-страницу, я все больше входил в азарт и мне показалось отличной идеей интегрировать мое исходное видео MPEG4 в HTML с помощью base64 и поставить его на бэкграунд. Вот что у меня получилось.
Я не силен в HTML, поэтому страница корректно отображается только в настольных браузерах.
Большинству мобильных устройств не хватает памяти, а если хватает, то видео на бэкграунде не воспроизводится.
Я сделал еще одну версию.
У меня она корректно отображается под Mac OS в Safari и Google Chrome. В Firefox не отображается видео на бэкграунде, зато на моем iPhone 8 во всех трех браузерах: Safari, Chrome и Firefox страница отображается корректно. Если среди читателей найдется эксперт по верстке, я буду очень признателен за помощь в допиливании этой демки.
Пожалуйста, дайте ей время загрузиться и отрендриться! Моему древнему Хакинтошу при загрузке этой страницы приходится очень несладко. Впрочем, на современном оборудовании работает достаточно гладко.
Видео, которое вы видите на заднем плане, это MPEG4-видео встроенное в HTML-страницу, встроенную в анимированное GIF изображение
Если сохранить данную страницу с расширением .html она будет открываться как веб-страница, а если сохранить в файл с расширением .gif — как анимированный GIF.
Было бы очень круто, если бы при сохранении с расширением .
mp4 она открывалась как видео-файл, но это к сожалению невозможно.
Как добавить анимацию на сайт и не облажаться. Читайте на Cossa.ru
29 октября 2019, 12:20
Разбираемся в Lottie с разработчиками BeaversBrothers.
Александр Устинов, BeaversBrothers
Поделиться
Поделиться
Представьте, что вы делаете сайт. Придумали крутую визуальную идею, проработали пользовательские сценарии, создали самый понятный интерфейс на свете и написали интересный текст. Но иногда всего этого недостаточно, чтобы удержать внимание пользователей.
Можно использовать анимацию. Всплывающие элементы, плавные переходы и подвижные иллюстрации оживляют сайт, создают интерактив, улучшают пользовательский опыт.
Методы и ограничения
Добавлять анимацию на сайт сложно. Чтобы она заработала так, как вы задумали, придётся учесть множество нюансов — ограничения старых браузеров, особенности устройств, вспышки на солнце.
Показать анимацию на экране пользователя можно несколькими методами.
-
Видео. Много весит, и в нём сложно настроить бесшовное воспроизведение. Видео подходит для коротких анимаций, которые не перегружают сайт.
-
GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
-
Набор последовательно переключающихся картинок, они же секвенции. Грубо говоря, это видео без сжатия кадров, которое так же много весит и замедляет работу браузера.
-
Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.
Недостатки этих методов ограничивают. Приходится выбирать: делать примитивную анимацию или добавить сложную и забыть о комфорте пользователей.
Нас не устраивает ни один из этих вариантов.
Чтобы воплощать на сайтах все наши задумки, требовался новый инструмент, который снимет ограничения. О нём мы расскажем подробнее.
Библиотека Lottie
В одном из проектов мы использовали библиотеку Lottie от Airbnb. С ней можно переносить анимации на страницы браузера прямо из After Effects. Библиотека оказалась очень полезной, потому что мы как раз создавали сайт с многослойной анимацией для RBK.money.
С Lottie мы смогли добавлять на сайты сложные анимации и не думать об их размерах.
На главную страницу сайта RBK.money мы добавили зацикленный ролик длиной 15 секунд, который весит всего 65 КБ в сжатом состоянии. У нас получились плавные анимации, которые быстро загружаются и воспроизводятся без стыковок.
Преимущества
Преимущества Lottie — меньший вес и адаптивность. Библиотека работает с векторной отрисовкой.
В Lottie можно управлять анимацией — настроить воспроизведение при нажатии на триггер или интерактивную анимацию, которая следует за движением курсора.
Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остаётся только подключить этот json к сайту и настроить его воспроизведение.
Недостатки
Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы. Поэтому когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas. В нём не настраивается прозрачность, зато нагрузка на процессор ниже.
Иногда Lottie преподносит неприятные сюрпризы.
Особенно после обновлений, которые иногда нарушают работу готовых анимаций. Создатели Lottie быстро приходят на помощь и решают проблему вместе с пользователями.
Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов», инструментов для плавного движения анимации. Пришлось всё делать вручную, и это заняло довольно много времени.
Вывод
С Lottie можно не беспокоиться о сложности анимации. Главное заранее убедиться, что она будет одинаково хорошо работать на всех устройствах, и правильно выбрать формат. Если анимаций много, лучше остановиться на canvas.
Перед началом проекта стоит убедиться, что в Lottie есть все нужные вам эффекты и инструменты. Или будьте готовы к поиску нестандартных решений.
Что получилось
Мы сделали необычный и запоминающийся сайт с плавными анимациями.
Он понравился целевой аудитории — после редизайна посещаемость выросла за четыре месяца на 35%.
За дизайн сайта мы получили награды: почётный диплом Awwwards, четыре отметки от CSS и серебро в номинации на конкурсе Рейтинг Рунета 2019.
Мы могли сделать простой сайт, который бы выполнял свои функции. Но с анимацией он понравился и запомнился пользователям больше.
Пробуйте и не сдавайтесь, решайте сложные задачи — и у вас получится необычный и яркий сайт.
Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на [email protected]. А наши требования к ним — вот тут.
Поделиться
Поделиться
⚡ Телеграм Коссы — здесь самый быстрый диджитал и самые честные обсуждения: @cossaru
📬 Письма Коссы — рассылка о маркетинге и бизнесе в интернете. Раз в неделю, без инфошума: cossa.pulse.is
Как анимировать GIF-файлы в HTML-документе?
спросил
Изменено 1 год, 6 месяцев назад
Просмотрено 232 тысячи раз
У меня есть следующий тег в статическом HTML-документе.
После того, как я установил его атрибут src так, чтобы он указывал на файл .gif (т. е.
- HTML
- GIF
- анимированный GIF
3
По умолчанию браузер всегда воспроизводит анимированные GIF-файлы, и вы не можете изменить это поведение. Если gif-изображение не анимируется, можно посмотреть двумя способами: что-то не так с браузером, что-то не так с изображением. Затем, чтобы исключить первый вариант, просто проверьте доверенное изображение в своем браузере (запустите фрагмент ниже, этот gif определенно анимированный и работает во всех браузерах) .
Ваш код выглядит нормально.
Можете ли вы проверить, анимирован ли этот фрагмент для вас?
1
Согласен с ответом Юрия Ткаченко.
Я хочу отметить это.
Это довольно специфичный сценарий. НО бывает.
Когда вы копируете GIF-файл до его полной загрузки на каком-либо сайте, таком как изображения Google. он просто дает адрес изображения предварительного просмотра этого gif. Что явно не гифка.
So, make sure it ends with .gif extension
try
и переключите src на ваш источник. Если всплывает alt, попробуйте другой URL. Если это не работает, перезагрузите компьютер или переключите браузер.
1
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — Гифки не будут отображаться на сайте
Задавать вопрос
спросил
Изменено 7 лет, 6 месяцев назад
Просмотрено 50 раз
Я делаю небольшой веб-сайт для одного из своих занятий, я хочу поместить 2 гифки и 2 изображения в одну таблицу 2×2, по какой-то причине они просто отображаются в виде крошечных красных прямоугольников.
CSS на странице создает красную рамку, поэтому Я предполагаю, что все, что отображается, это css.
<голова> <название> ХАЙП! ХАЙП! ХАЙП! ХАЙП! ХАЙП! ХАЙП! ХАЙП! ХАЙП! ХАЙП! <стиль> тело {цвет фона: светло-серый; цвет : серебристый;} <тело> <таблица> Отражает край 2 Главная страница Комментарии История Что мы знаем Обман! Список символов Студия Не могу дождаться
Все будет хорошо
ПОНРАВИТЬСЯ
<таблица> ОБЪЯВЛЕНИЕ 