Хаотичное движение букв, складывающихся в слово
1,00
р.
Как реализовать хаотичное движение букв, которые на финише складываются в слово.
В начале процесса слово, как единое целое находится на экране. Затем оно распадается на буквы, которые начинают хаотичное движение, затем буквы обратно складываются в слово. С помощью Javascript это довольно просто сделать,- уже существуют такие скрипты.
Возможно ли реализовать такой же принцип, как в JS средствами HTML,CSSили 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 } A B C D E
В начале процесса слово, как единое целое находится на экране. Затем оно распадается на буквы, которые начинают хаотичное движение, затем буквы обратно складываются в слово. С помощью Javascript это довольно просто сделать,- уже существуют такие скрипты.
Возможно ли реализовать такой же принцип, как в JS средствами HTML,CSSили 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 } A B C D E
