Автор Коул Тернер
Первое пасхальное яйцо появилось в 1979 году, когда Atari выпустила видеоигру Adventure. Часто спрятанные в углах и краях программного обеспечения, инженеры с тех пор оставляют после себя секретные подсказки. Тем, кто ищет подсказки и находит пасхальные яйца, дается возможность разделить радость с чем-то удивительным, странным или загадочным.
Делиться радостью - вот что движет нами в Netflix. От создания отличного клиентского опыта до доставки отличного оригинального контента по всему миру. Мы очень гордимся тем, что делаем наших участников счастливыми. И наши гости тоже!
Что-то зловещее ждет…
В последнем сезоне «Джессики Джонс» из Marvel мы хотели сделать что-то необычное для фанатов. Мы посадили пасхальное яйцо для членов и нечленов. Участникам была предоставлена возможность искать улики, которые были подброшены через социальные сети, и находить скрытый трейлер. Для фанатов мы подложили пасхальное яйцо на титульный лист, которое при активации переносило пользователя в другой мир кинематографической вселенной.
На заднем плане с потолка свисала и мерцала лампочка. На рабочем столе при наведении курсора свет вспыхивает ярче. Щелчок по лампочке откроет Темную комнату загадочного злоумышленника сезона. Фотографии, натянутые на проволоку, окрашиваются в темно-красный цвет. Среди этих фотографий наши герои Джессика Джонс и друзья. Сцена обостряется, чтобы сфокусироваться, поскольку трейлер, одна из фотографий, раскрывается, раскрывая скрытое сообщение от зловещего Грегори Саллинджера.
Вы видите не видео или WebGL. Кроме трейлера, движущихся объектов нет. Мы создали визуальные эффекты с помощью CSS-анимации и переходов. Стоимость использования объекта видеодвижений превышает 10 МБ.
Статические изображения и таблицы стилей стоят всего 10 КБ в CSS и 722 КБ для изображений. Фоновое изображение было сжато с 5 МБ до 108 КБ без ущерба для деталей или цвета. Использование CSS дало нам возможность создать впечатляющую темную комнату, которая работает в браузерах для настольных компьютеров и в мобильной сети.
Давайте посмотрим еще раз немного помедленнее:
Давайте сосредоточимся на трех основных элементах: лампочке, фоновом изображении и трейлере.
Включение света
Для анимации лампочек мы работали с нашими партнерами по дизайну, Кай Хунг и Кейси Калишевски, чтобы создать мигающую и мерцающую анимацию, которая ощущалась почти как скачок напряжения. Мы использовали три изображения для состояний выключения, мерцания и включения. Мы могли бы сделать это, наложив изображения друг на друга:
Затем с помощью свойства анимация кадры управляют непрозрачностью изображения впереди для создания эффекта.
Чтобы создать раскачивающееся движение, родительский контейнер был анимирован с помощью преобразования (rotateX, rotateX и translate). Было довольно сложно использовать статическое изображение, потому что свисающие лампочки не просто перемещаются слева направо, а, наоборот, кружат как таковые:
Было создано более 30 кадров, имитирующих движение лампочки и выбросы электричества через нить накала.
Освещение: вспышка и чутье
Динамическое освещение или перформанс: выберите одно. Это был выбор, который мы должны были сделать при выборе вспышки лампочки. Мы выбрали производительность, потому что наши отображаемые страницы отображают ряд видео и элементов DOM.
В нашей первой попытке создать блики мы использовали действительно изящный трюк CSS, используя filter: drop-shadow (…). При этом создается изображение и создается силуэт фигуры любого цвета. Это сделало действительно красивую область вокруг формы изображения. Однако это также отбрасывает тень от проволоки, чего мы не хотели.
Мы попробовали другой подход. Использование простого красного элемента div с максимальным значением border-radius и filter: blur (80px) для создания области эффекта. Использование mix-blend-mode: color - красный цвет хорошо сочетается с фоновым изображением. Это выглядело потрясающе.
Приведение фона в фокус
Темная комната взрывается от лампочки, что обеспечивает невероятное погружение, когда сцена становится более резкой для фокусировки. Фоновое изображение накладывается на фоновый рисунок. Изображение расширяется до тех пор, пока не займет всю страницу.
Мы использовали еще одно изящное свойство под названием clip-path, которое маскирует изображение кружком. Используя переход, круг может увеличиваться до формы контейнера.
По пути мы столкнулись с некоторыми проблемами. По мере приближения к завершению анимации фоновое изображение будет мерцать. В некоторых случаях изображение полностью исчезало. Что было непросто, так это то, как это будет работать в некоторых разрешениях браузера, но исчезать в других.
Мы испробовали все уловки из книги. В этих анимациях уже использовалось любое свойство, которое заставляло браузер использовать аппаратное ускорение:
StackOverflow спешит на помощь! Этот ответ подтвердил наше подозрение, что мы просто делаем слишком много анимации с одним элементом. Перемещение перехода непрозрачности к родительскому элементу решило проблему.
Я столкнулся с ошибками при применении аппаратного ускорения к частям страницы, которые уже были ускорены - Уэсли Хейлз
Больше чем трейлер
Что хорошо в работе инженером по пользовательскому интерфейсу в Netflix, так это сотрудничество. Мы сотрудничаем с дизайнерами, чтобы воплотить в жизнь лучшие идеи. Одна из этих идей заключалась в том, чтобы сделать трейлер частью сцены.
Что, если трейлер может быть одной из фотографий антагониста? Вместе мы создали эту концепцию, которая действительно сделала трейлер более захватывающим, как будто вы входите в темную комнату.
Используя градиент и отложенную анимацию, трейлер появляется вскоре после перехода, который имитирует поведение мгновенного проявления фотографии. Довольно аккуратно!
Оркестровка этих анимаций создает захватывающий эффект, который переносит нас из одной обстановки в другую. Усилия маркетинга, дизайна и инженерии объединяются, чтобы сделать этот опыт еще более интуитивным.
Получать такой опыт очень полезно, потому что мы можем проявлять творческий подход и делиться восхищением с нашими клиентами. Мы с удовольствием создаем это пасхальное яйцо, чтобы волновать поклонников и вызывать у них ожидание. И всего 732 КБ статических изображений и CSS!
Это то, что мы называем восхитительной инженерией.
