Анимация логотипа

121
29 июня 2021, 09:50

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

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

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

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

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

Answer 1

Вот Вам планетка на 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>

Answer 2
  1. Заставить крутиться планету можно без всяких JS и гифок. Ищете изображения, собираете в одно, делаете анимацию путем сдвига частей изображения внутри блока (например, меняете background-position).
  2. Заставить крутиться текст можно с помощью CSS-трансформаций. transform3d и анимация вам в помощь.
READ ALSO
Application.Exit() не закрывает приложение
c#

Application.Exit() не закрывает приложение

Есть поток, который выполняется бесконечно:

 102
Как подставить число из переменной в Rows
c#

Как подставить число из переменной в Rows

Имеем DataTableRows[0][0];

 97
mysql DATETIME вычисления
MySQL

mysql DATETIME вычисления

Делаю запрос:

 141
Подскажите, что значит такая запись в PHP?
PHP

Подскажите, что значит такая запись в PHP?

Подскажите, что значит такая запись в PHP?

 92