Подскажите как сделать такую бегущую строку?

138

09 сентября 2021, 15:00

Подскажите пожалуйста как сделать бегущую строку как на картинке, которая бежит вокруг элемента, например вокруг картинки. Если можно, чтобы текст задавался с html элемента. Круговое движение бегущей строки, на заднем плане стока немного затухает и бежит она допустим вокруг какой-нибудь картинки. Спасибо.

Answer 1

Берем фразу, бьем по символам включая пробелы.
Каждый символ помещаем в абсолютно позиционированный квадратный div
Располагаем эти квадраты вокруг цилиндра, за счет css 3д трансформаций вот таким образом (вид сверху):

для этого:

сдвигаем по Z в отрицательную область - это приблизит div в строну наблюдателя
вращаем вокруг оси Y, на угол, посчитанный разбиением целой окружности на кол-во символов
1. Крутим это все вокруг центра

let chars = 'hello hello hello hello hello hello '.split(''); 
spin.innerHTML = chars.map((c, i) => { 
  return `<div class=char style="--a:${360/chars.length*i}deg">${c}</div>` 
}).join('');

body { 
  perspective: 400px; 
} 
 
.char { 
  animation: rot 20s linear infinite; 
  width: 40px; 
  height: 40px; 
  margin-left: -20px; 
  text-align: center; 
  font-size: 30px; 
  position: absolute; 
} 
 
#spin { 
  margin-left: 50vw; 
} 
 
@keyframes rot { 
  from {transform: rotateY(var(--a)) translateZ(150px)} 
  to   {transform: rotateY(calc(var(--a) - 360deg)) translateZ(150px)} 
}