Задание: Дизайнер баннеров. Сверстать анимированный HTML5-баннер 1887×100 px по готовому макету (макет в Gimp XCF) (Дистанционная работа)
Требуется специалист по HTML5-баннерам / frontend-верстальщик для подготовки анимированного баннера, который будет размещён на стороннем сайте. Исходные данные: — есть готовый макет баннера в формате GIMP XCF; — исходный размер: 1887 × 100 px; — баннер уже согласован владельцем сайта в статичном PNG-виде; — баннер размещает программист стороннего сайта; целевая ссылка уже передана владельцу сайта. Задача: Сделать HTML5-версию баннера с лёгкой, плавной циклической анимацией в правой части. В правой части расположены четыре отдельных объекта/изображения виндеров: красный, синий, белый и коричневый. Нужно, чтобы они автоматически и плавно менялись местами по кругу. Стартовый порядок: красный → синий → белый → коричневый. Далее каждые 2 секунды порядок сдвигается на одну позицию: синий → белый → коричневый → красный; белый → коричневый → красный → синий; коричневый → красный → синий → белый. После этого цикл повторяется. Требования к анимации: — плавный горизонтальный циклический сдвиг без рывков; — длительность перехода между позициями: ориентировочно 0,35–0,6 секунды; — задержка между сменами: около 2 секунд; — без звука, видео, всплывающих элементов, раскрытия баннера и тяжёлых эффектов; — предпочтительно CSS-анимация; JavaScript — только при объективной необходимости; — без внешних библиотек, CDN, внешних шрифтов и внешних ресурсов; — баннер должен выглядеть аккуратно как в неподвижном первом кадре, так и во время анимации. Адаптация на сайте: — рабочая ширина баннера: от 962 до 1887 px; — на ширине 1887 px высота баннера — 100 px; — при уменьшении ширины до 962 px баннер должен пропорционально уменьшаться до 51 px по высоте; — на экранах менее 980 px сайт отображает фиксированный макет шириной около 980 px и уменьшает его целиком, поэтому отдельную мобильную версию делать не требуется; — необходимо проверить читаемость и корректность анимации как минимум на ширинах: 1887, 1440, 1200, 1024 и 962 px. Что нужно передать по итогам: Готовый HTML5-баннер в формате, пригодном для установки программистом сайта: HTML/CSS/JS и папка с ассетами либо ZIP-архив. Все исходные файлы проекта, чтобы баннер можно было при необходимости изменить в будущем. Статичный PNG fallback в размере 1887 × 100 px; при необходимости — вариант для минимального отображаемого размера 962 × 51 px. В отклике прошу указать: — 2–3 примера сделанных вами HTML5-баннеров с анимацией; — используете ли вы CSS-анимацию или JavaScript и почему; — стоимость и срок; — что конкретно входит в стоимость; — сколько раундов правок включено; — сможете ли вы извлечь и подготовить отдельные элементы из XCF-файла или нужны отдельные PNG-слои от меня.
