Фото: ниндзя М.
Прошло чуть больше недели с тех пор, как я поставил первую задачу — воссоздать этот анимированный GIF в коде — так что пришло время взглянуть на результаты.
Помните, что не было настоящих правил и с научной точки зрения правильного ответа на проблему — все сводится к балансу кода и магии. У нас наверняка есть куча фантастических решений, поэтому я покажу вам лучшую горстку.
Шорт-лист
Скотт Келлум (блог) — border-radius / border-width
Самым популярным подходом, похоже, было решение «border-radius / border-width», и Скотт Келлум выбрал одно из первых и все еще лучшее решение. Создание треугольника с граничными кромками не так уж сложно, но элегантным способом было легко войти и выйти из перехода треугольника.
Код Скотта очень лаконичен, а анимация плавная. Ницца.
Джереми Карлссон ( Enjikaka ) — SVG
Как большой сторонник SVG, было здорово видеть отличное решение SVG благодаря Джереми Карлссону. Очевидно, что SVG изменяет разметку в этой демонстрации, но может быть встроен в качестве изображения, объекта или фона CSS. Я думаю, что SVG может в конечном итоге стать лучшим ответом на этот вызов.
Вы увидите, что Джереми использует функциональность SVG <animate> Было бы интересно сравнить производительность анимации.
Саймон Бюргер ( simonbuerger ) — CSS клип-путь
Саймон Бюргер основывает свое решение на изменении пути клиппирования CSS. Вы часто видите путь клипа, используемый со значениями ‘rectangle’, ‘circle’ или ‘ellipse’, но Саймон использует более редкое значение ‘polygon’. Polygon принимает серию значений XY, чтобы создать форму маски.
img {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}
Умные вещи.
Шарат М.Р. ( космогений ) — CSS трансформации
Sharat MR делает некоторые красивые вещи с помощью CSS3-преобразований. И в этой, и в следующей статье их подход основан на использовании перекосов и поворотов CSS, и их трудно разделить.
На мой взгляд, это две лучшие чистые «репродукции» оригинальной анимации — в том числе время и переходы.
Praseetha KR ( @void_imagineer ) — CSS трансформации
Это подводит нас к записи Praseetha KR, которую я с радостью выберу в качестве первого победителя конкурса! Как я уже говорил ранее, решение Шарата было столь же впечатляющей анимацией. Решение Praseetha немного меньше и более модульно из-за его основ SASS. Прекрасный код.
Отличная работа от Praseetha KR, и действительно всех, кто предложил решение. Я думаю, что это отличный способ проверить себя и учиться у других.
Большое спасибо всем, кто участвовал.
PS Следите за «Вызов № 2» позже на этой неделе!