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

#javascript #css #jquery

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

Ответы

Ответ 1

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




для этого:


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


Крутим это все вокруг центра  





let chars = 'hello hello hello hello hello hello '.split('');
spin.innerHTML = chars.map((c, i) => {
  return `
${c}
`
}).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)}
}