Решение SVG
В svg есть аналог HTML <span>
,- <tspan dx="x" dy="y">S</tspan>
Он более функционален, но если пойти по пути решения, предложенного в вопросе, то тоже будет очень много кода.
Есть более эффективное решение, но чтобы понять его, наверное надо пойти от простого к сложному.
Анимация движения слова целиком
Команда SVG вывода слова на экран:
<text x="100" y="500" font-size="90">Stackoverflow<text>
где x
и y
координаты первого символа слова.
Для анимации перемещения слова, нужно как-то динамически изменять или считывать эти координаты.
Но в SVG нет переменных, тем более массивов как в JS
Но есть возможность организовать их подобие в команде <animate>
<animate xlink:href="#text1"
attributeName="x"
attributeType="XML"
values="200;
100;
200;
332;
464;
332;
200"
dur="4.0s"
begin="0s"
repeatCount="2" />
Цифры через точку с запятой указывают несколько положений по оси Х
, которое будет последовательно занимать слово.
Аналогичная команда пишется для координаты Y
.
Ниже полный код для перемещения слова целиком:
<style>
#text1 {
fill:#642B82;
}
</style>
<svg width="500px" height="500px" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="grad"
x1="0" y1="0" x2="0" y2="100%"
gradientUnits="userSpaceOnUse">
<stop offset="2%" stop-color="steelblue" />
<stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
<stop offset="45%" stop-color="hsla(80, 100%, 77%, 0)" />
<stop offset="100%" stop-color="yellowgreen" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" />
<text x="200 " y="500"
font-size="80" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Stackoverflow</text>
<text id="text1" x="200" y="500"
font-size="80">Stackoverflow</text>
<animate xlink:href="#text1"
attributeName="x"
attributeType="XML"
values="200;
100;
200;
332;
464;
332;
200"
dur="4.0s"
begin="0s"
repeatCount="2" />
<animate xlink:href="#text1"
attributeName="y"
attributeType="XML"
values="500;
100;
100;
500;
800;
800;
500"
dur="3.5s"
begin="0s"
repeatCount="2" />
</svg>
Разбивка слова на отдельные буквы
В SVG есть очень мощное средство для этой цели. Оно скрыто в команде <animate>
так как каждый символ является векторным объектом, то у него есть свои координаты, используя которые, можно разбить слово на отдельные буквы.
Если продолжать аналогию с JS
, то это будет похоже на двумерный массив, где каждый столбец это изменяемые значения перемещения, соответствующего этому столбцу символа.
S t a c k o v e r f l o w
1поз. |200 233 266 299 332 365 400 431 464 497 530 563 596;
2поз. |100 600 200 365 700 465 465 563 530 398 431 850 900;
3поз. |200 500 900 950 150 531 300 620 150 266 365 650 900;
4поз. |332 233 820 300 800 633 200 670 300 850 800 530 266;
5поз. |464 900 900 900 820 670 430 900 530 600 233 365 100;
6поз. |332 100 100 100 500 100 800 563 900 700 900 100 100;
7поз. |200 233 266 299 332 365 400 431 464 497 530 563 596
Другими словами:
первый столбец, первая строка,- это координата x=200
в первой позиции перемещения, первого символа слова - "S"
Затем символ "S"
перемещается на 2-ю позицию x=100
и т.д. до возвращения на первоначальное место в поз.7
Второй столбец для второго символа "t", который начинает перемещение с первой позиции x="233"
переходит на 2-ую позицию x="600"
В процессе анимации происходит считывание первой строки, все символы расставляются в соответствии с указанными для них координатами.
Далее считывается вторая строка, символы независимо друг от друга занимают свои места. Каждая строка должна быть отделена от другой строки точкой с запятой. У последней строки точка с запятой не указывается.
По аналогии точно такая же таблица составляется для задания координаты Y
.
Обе команды <animate>
предназначенные для изменения координат X
и Y
начинают работать одновременно, обеспечивая тем самым одновременное изменение координат в каждой позиции движения, для каждой буквы.
Ниже код анимации иммитируюшей хаотичное движение букв:
<style>
#text1 {
fill:#B2000C;
}
</style>
<svg width="50%" height="50%" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
<title>Animation of text x and y attributes</title>
<defs>
<linearGradient id="grad"
x1="0" y1="0" x2="0" y2="100%"
gradientUnits="userSpaceOnUse">
<stop offset="2%" stop-color="steelblue" />
<stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
<stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)" />
<stop offset="95%" stop-color="yellowgreen" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" />
<text x="200 " y="500"
font-size="90" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Stackoverflow</text>
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text>
<animate xlink:href="#text1"
attributeName="x"
attributeType="XML"
values="200 233 266 299 332 365 400 431 464 497 530 563 596;
100 600 200 365 700 465 465 563 530 398 431 850 900;
200 500 900 950 150 531 300 620 150 266 365 650 900;
332 233 820 300 800 633 200 670 300 850 800 530 266;
464 900 900 900 820 670 430 900 530 600 233 365 100;
332 100 100 100 500 100 800 563 900 700 900 100 100;
200 233 266 299 332 365 400 431 464 497 530 563 596"
dur="4s"
begin="0s"
repeatCount="2" />
<animate xlink:href="#text1"
attributeName="y"
attributeType="XML"
values="500 500 500 500 500 500 500 500 500 500 500 500 500;
100 200 850 100 250 175 750 100 750 720 850 500 50;
100 600 600 250 200 450 50 200 520 550 300 300 750;
500 100 650 650 600 150 550 50 150 550 200 550 400;
800 300 100 750 150 650 75 350 550 700 755 120 800;
800 600 300 150 750 350 700 650 200 250 500 650 100;
500 500 500 500 500 500 500 500 500 500 500 500 500"
dur="4s"
begin="0s"
repeatCount="2" />
</svg>
Получился очень мощный инструмент для этого вида анимации. Можно поиграться с ним, изменять скорость, время начала, добавляя события сделать анимацию интерактивной, изменяя время продолжительности для анимации можно достичь эффекта, "горизонтальной" и "вертикальной парковки" букв на финише анимации.
Можно заменить текст анимации на другой. Если будет короче исходного, то будет работать точно также. Если будет длиннее 13 символов, то лишние символы будут приклеены к 13 символу и будут двигаться вместе с ним одной группой.
Ниже примеры:
Горизонтальная парковка букв
Эффект достигается разницей времени выполнения двух анимаций. Горизонтальная анимация на 1сек. длится больше.
<style>
#text1 {
fill:#B2000C;
}
</style>
<svg width="50%" height="50%" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
<title>Animation of text x and y attributes</title>
<defs>
<linearGradient id="grad"
x1="0" y1="0" x2="0" y2="100%"
gradientUnits="userSpaceOnUse">
<stop offset="2%" stop-color="steelblue" />
<stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
<stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)" />
<stop offset="95%" stop-color="yellowgreen" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" />
<text x="200 " y="500"
font-size="90" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Stackoverflow</text>
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text>
<animate xlink:href="#text1"
attributeName="x"
attributeType="XML"
values="200 233 266 299 332 365 400 431 464 497 530 563 596;
100 600 200 365 700 465 465 563 530 398 431 850 900;
200 500 900 950 150 531 300 620 150 266 365 650 900;
332 233 820 300 800 633 200 670 300 850 800 530 266;
464 900 900 900 820 670 430 900 530 600 233 365 100;
332 100 100 100 500 100 800 563 900 700 900 100 100;
200 233 266 299 332 365 400 431 464 497 530 563 596"
dur="4s"
begin="0s"
repeatCount="2" />
<animate xlink:href="#text1"
attributeName="y"
attributeType="XML"
values="500 500 500 500 500 500 500 500 500 500 500 500 500;
100 200 850 100 250 175 750 100 750 720 850 500 50;
100 600 600 250 200 450 50 200 520 550 300 300 750;
500 100 650 650 600 150 550 50 150 550 200 550 400;
800 300 100 750 150 650 75 350 550 700 755 120 800;
800 600 300 150 750 350 700 650 200 250 500 650 100;
500 500 500 500 500 500 500 500 500 500 500 500 500"
dur="3s"
begin="0s"
repeatCount="2" />
</svg>
Вертикальная парковка букв
<style>
#text1 {
fill:#B2000C;
}
</style>
<svg width="70%" height="70%" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
<title>Animation of text x and y attributes</title>
<defs>
<linearGradient id="grad"
x1="0" y1="0" x2="0" y2="100%"
gradientUnits="userSpaceOnUse">
<stop offset="2%" stop-color="steelblue" />
<stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
<stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)" />
<stop offset="95%" stop-color="yellowgreen" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" />
<text x="200 " y="500"
font-size="90" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Stackoverflow</text>
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text>
<animate xlink:href="#text1"
attributeName="x"
attributeType="XML"
values="200 233 266 299 332 365 400 431 464 497 530 563 596;
100 600 200 365 700 465 465 563 530 398 431 850 900;
200 500 900 950 150 531 300 620 150 266 365 650 900;
332 233 820 300 800 633 200 670 300 850 800 530 266;
464 900 900 900 820 670 430 900 530 600 233 365 100;
332 100 100 100 500 100 800 563 900 700 900 100 100;
200 233 266 299 332 365 400 431 464 497 530 563 596"
dur="3s"
begin="0s"
repeatCount="2" />
<animate xlink:href="#text1"
attributeName="y"
attributeType="XML"
values="500 500 500 500 500 500 500 500 500 500 500 500 500;
100 200 850 100 250 175 750 100 750 720 850 500 50;
100 600 600 250 200 450 50 200 520 550 300 300 750;
500 100 650 650 600 150 550 50 150 550 200 550 400;
800 300 100 750 150 650 75 350 550 700 755 120 800;
800 600 300 150 750 350 700 650 200 250 500 650 100;
500 500 500 500 500 500 500 500 500 500 500 500 500"
dur="4s"
begin="0s"
repeatCount="2" />
</svg>
Подставляем другие буквы:
<style>
#text1 {
fill:#642B82;
}
</style>
<svg width="70%" height="70%" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
<title>Animation of text x and y attributes</title>
<defs>
<linearGradient id="grad"
x1="0" y1="0" x2="0" y2="100%"
gradientUnits="userSpaceOnUse">
<stop offset="2%" stop-color="steelblue" />
<stop offset="45%" stop-color="hsla(180, 100%, 50%, 0)" />
<stop offset="45%" stop-color="hsla(80, 100%, 50%, 0)" />
<stop offset="95%" stop-color="yellowgreen" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" />
<text x="200 " y="500"
font-size="90" fill="#E4E4E4" stroke-width="4" stroke="#E4E4E4">Svg-art.ru</text>
<text id="text1" x="200" y="500"
font-size="90">Svg-art.ru</text>
<animate xlink:href="#text1"
attributeName="x"
attributeType="XML"
values="200 233 266 299 332 365 400 431 464 497 530 563 596;
100 600 200 365 700 465 465 563 530 398 431 850 900;
200 500 900 950 150 531 300 620 150 266 365 650 900;
332 233 820 300 800 633 200 670 300 850 800 530 266;
464 900 900 900 820 670 430 900 530 600 233 365 100;
332 100 100 100 500 100 800 563 900 700 900 100 100;
200 233 266 299 332 365 400 431 464 497 530 563 596"
dur="3s"
begin="0s"
repeatCount="2" />
<animate xlink:href="#text1"
attributeName="y"
attributeType="XML"
values="500 500 500 500 500 500 500 500 500 500 500 500 500;
100 200 850 100 250 175 750 100 750 720 850 500 50;
100 600 600 250 200 450 50 200 520 550 300 300 750;
500 100 650 650 600 150 550 50 150 550 200 550 400;
800 300 100 750 150 650 75 350 550 700 755 120 800;
800 600 300 150 750 350 700 650 200 250 500 650 100;
500 500 500 500 500 500 500 500 500 500 500 500 500"
dur="4s"
begin="0s"
repeatCount="2" />
</svg>