Как сделать анимацию логотипа?

Question

[Сергей Коноваленко]

Заказчик хочет сделать анимированный логотип, хочет добавить эффект движения.

Рассматривает 2 варианта:

1) Запустить крутиться планету — тогда нужно искать для нее полную модель глобуса и чтобы она начинала крутиться с такого ракурса материков, как сейчас изображено на лого. Таким образом планета будет крутиться, а буквы "Мир принадлежит тебе" будут стоять на месте. Крутиться в левую сторону — тогда создается эффект, что дирижабль летит вокруг земного шара.

2) Если планету запустить не получится, тогда нужно запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты.

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

Comments

[origami1024]

Можно еще планету вращать вокруг центра картинки, надпись сделать плавно меняющей цвета и чтобы каждая буква по очереди становилась большой, а дирижабль сделать плавающим медленно сверху вниз и взад вперед, его ветром сдувает, но он борется.

[tuxfighter]

Сделать гифку - не вариант?

Answer 1

[Rustam Bainazarov]

Что первое, что второе, по описанию, требуют WebGL. Второй вариант проще и легче в плане кода будет: статичная сфера с текстурой + текст, который описывает движение по её орбите.

Можно на CSS сделать достаточно убогую бесконечную прокрутку карты, но она не будет учитывать геометрию шара.

Типа так:


UPDATE. Увидел такой баг в Android Chrome в результате совместной работы border-radius и overflow:

Нашел решение хаком. Нужно добавить следующее к такому блоку:

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

Это исправило проблему, обновил песочницу.

Comments

[hzzzzl]

но текстуру с картой наверняка можно "выпукнуть" в фотошопе, чтобы норм выглядело РЕАЛИСТИЧНО

[Rustam Bainazarov]

hzzzzl, можно, почему бы и нет. Ещё можно градиент по краям сделать, как в макете, а-ля атмосфера.

Или выпуклости сделать на фильтре.

Я нашёл для примера первую картинку в Интернете.

[Rustam Bainazarov]

hzzzzl, по твоим заветам сделал атмосферу на box-shadow, текстуру покрасил (500 кб), сам глобус градиентом, LOL.

Answer 2

[Ivan Bogachev]

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

На CSS только плоская карта получится. Надпись можно было бы соорудить с помощью большого количества элементов и 3d-трансформаций, но результат будет очень грубым. Так что WebGL в таких задачах - наше все.

Запустить крутиться планету

Все не так уж и сложно - одна сфера, одна текстура. Пример можно посмотреть в статье про трехмерные презентации на Three.js, там все то же самое, только в вашем случае сфера маленькая. Ну а поворачивать землю немного каждый кадр - это даже не задача.

запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты

Юрий Артюх в одном из стримов делал как раз такую вращающуюся надпись. Очень прикольно получилось, стоит посмотреть.

P.S.: А еще всегда есть ход сусликом (про которого все забывают, но он есть) - сделать гифку и использовать ее, а не приплетать кучу скриптов для одной маленькой анимированной штучки.

Comments

[Rustam Bainazarov]

Сергей Коноваленко, обратите внимание на данного человека, он хорошо разбирается в WebGL и может сделать вам данную задачу на заказ.

Answer 3

[Антон Р.]

Карта может быть бесшовной картинкой, а дальше ты просто скроллишь её влево или вправо, внутри круглой "маски" глобуса. Короче круглая маска и под ней бесшовная картинка с материками.
Пример бесконечного скролла картинки: https://amigostone.ru/

Answer 4

[Antonio Solo]

анимейтед гиф