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

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

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

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

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

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?
5d68f2987ab39810726613.jpeg
  • Вопрос задан
  • 1406 просмотров
Решения вопроса 4
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Что первое, что второе, по описанию, требуют WebGL. Второй вариант проще и легче в плане кода будет: статичная сфера с текстурой + текст, который описывает движение по её орбите.

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

Типа так:


UPDATE. Увидел такой баг в Android Chrome в результате совместной работы border-radius и overflow:
5d694ce0ed71b148762968.png
Нашел решение хаком. Нужно добавить следующее к такому блоку:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */


Это исправило проблему, обновил песочницу.
Ответ написан
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

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

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

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

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

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

P.S.: А еще всегда есть ход сусликом (про которого все забывают, но он есть) - сделать гифку и использовать ее, а не приплетать кучу скриптов для одной маленькой анимированной штучки.
Ответ написан
anton_reut
@anton_reut
Начинающий веб-разработчик
Карта может быть бесшовной картинкой, а дальше ты просто скроллишь её влево или вправо, внутри круглой "маски" глобуса. Короче круглая маска и под ней бесшовная картинка с материками.
Пример бесконечного скролла картинки: https://amigostone.ru/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы