4

введите сюда описание изображения

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

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

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

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

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

7
  • 1
    Даже если планета будет изначально в "неправильном" ракурсе - можно пересобрать гифку/видео в правильный. С гифкой проще.
    – Sheridan
    30 авг 2019 в 10:08
  • 1
    Может, и не в тему вопроса, но стоит упомянуть, имхо - это уже не логотип, в правильном понимании этого понятия - посмотрите, разве хоть одна серьезная компания имеет анимированный логотип?) - Цыганщиной-с отдаетс...) Логотип coderhs.com/snippets/logo-what
    – Coder
    30 авг 2019 в 10:34
  • 2
    "Крутиться в левую сторону — тогда создается эффект, что дирижабль летит вокруг земного шара". Вообще-то, Земля может вращаться только в одном направлении - с запада на восток. То есть, если смотреть на Землю сверху в направлении Северного полюса, то она должна вращаться против часовой стрелки. В предлагаемом вами варианте расматривается вариант движения Земли в обращенном времени (или перемотки видео назад), но и тогда дирижабль изначально должен был лететь попой вперед в нормальном времени.
    – asianirish
    30 авг 2019 в 10:37
  • 1
    @Coder Вон, Татьяныч, сделал анимированный лого для Хованского и ничего ;D
    – asianirish
    30 авг 2019 в 10:42
  • 2
    @Coder Вон, военные тоже в фуражках в помещениях ходят. То есть в дизайне нет правила, которые нельзя нарушить, всегда найдется обстаятельство, при котором заданное правило не действует. Но, впрочем, ладно, ладно, я не настроен вести священные войны ;D
    – asianirish
    30 авг 2019 в 10:48

2 ответа 2

8

Вот Вам планетка на svg+d3.js, при желании сюда не трудно добавить интерактивность

const s = 600;
const svg = d3.select('svg');
const projection = d3.geoOrthographic().translate([s / 2, s / 2]);
const path = d3.geoPath().projection(projection);
const url = 'https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json';

fetch(url).then(r => r.json()).then(d => {
    svg.selectAll("path.country")
      .data(topojson.feature(d, d.objects.countries).features)
      .enter()
      .append("path")
      .classed("country", true)
      .style("stroke", "#888")
      .style("fill", (d, i) => '#e3edb8');
})

requestAnimationFrame(draw)

function draw(t) {
  projection.rotate([0.01 * t]);
  svg.selectAll("path.country").attr("d", path);
  requestAnimationFrame(draw)
};
body, svg {
  overflow: hidden;
  margin: 0;
  width: 100vw;
  height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<svg viewbox="0 0 600 600">
  <circle r=250 cx=300 cy=300 fill=#91b9d2></circle>
  <path fill=#e3edb8 d='M575,300 a275,275,0,0,0,-550,0 a275.5,275.5,0,1,1,550,0'></path>
  <path fill=#34509a d='M575,300 a275,275,0,0,1,-550,0 a275.5,275.5,0,1,0,550,0'></path>
</svg>

3
  • 2
    toster.ru/q/662308 что то не устроило автора вопроса 30 авг 2019 в 11:42
  • @MaximLensky что-то не устроило =) 30 авг 2019 в 11:46
  • меня в моем решении бы не устроил размер json, но это поправимо =) 30 авг 2019 в 11:47
2
  1. Заставить крутиться планету можно без всяких JS и гифок. Ищете изображения, собираете в одно, делаете анимацию путем сдвига частей изображения внутри блока (например, меняете background-position).
  2. Заставить крутиться текст можно с помощью CSS-трансформаций. transform3d и анимация вам в помощь.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.