Как реализовать хаотичное движение букв, которые на финише складываются в слово.
В начале процесса слово, как единое целое находится на экране. Затем оно распадается на буквы, которые начинают хаотичное движение, затем буквы обратно складываются в слово.
С помощью Javascript это довольно просто сделать,- уже существуют такие скрипты.
Возможно ли реализовать такой же принцип, как в JS средствами HTMLCSSили SVG?
Сразу же в голову приходит такое решение.
С помощью средств HTML можно разделить слово на отдельные буквы:
S
t
a
с
k
и затем с помощью css-animation, как-то их анимировать. Для придания реалистичности придется прописывать перемещение каждой буквы в несколько различных позиций.
Но это будут простыни кода.
Есть ли более эффективное решение без применения Javascript?
Ответ
Вариант с переменными — так можно обойтись одним описанием анимации и затем только менять коэффициенты для каждой из букв.
@keyframes move {
0% {
transform: translate(calc(250px / var(--c1)), calc(650px / var(--c1)));
}
25% {
transform: translate(calc(-150px / var(--c1)), calc(325px / var(--c1)));
}
50% {
transform: translate(calc(185px / var(--c1)), calc(-725px / var(--c1)));
}
75% {
transform: translate(calc(410px / var(--c1)), calc(145px / var(--c1)));
}
100% {
transform: translate(0, 0);
}
}
body {
min-height: 100vh;
display: flex;
margin: 0;
overflow: hidden;
}
div {
margin: auto;
}
span {
font-size: 22px;
position: relative;
animation: move 5s;
display: inline-block;
}
.letters__a {
--c1: 2;
--c2: 3;
}
.letters__b {
--c1: -1.5;
--c2: -0.8;
}
.letters__c {
--c1: 5;
--c2: 2;
}
.letters__d {
--c1: -2.8;
--c2: -7.3;
}
.letters__e {
--c1: -4.1;
--c2: -3.6;
}
Комментариев нет:
Отправить комментарий