Подскажите как добиться такой анимации текста, как на этом сайте - https://alethemes.com/ale-fashion/ . Появление текста "upcoming collection...". Возможно ли такого добиться на чистом css? Или может есть какие-то сайты, ресурсы с готовыми подобными решениями.
2 ответа
let text = 'upcoming collection...'
let content = document.querySelector('#content')
for (let i in [...text]) {
let letter = document.createElement('span')
letter.textContent = [...text][i]
if(letter.textContent.match(/\s/)) {
letter.style.margin = 'auto 3px'
}
letter.style.animationDelay = i/10+'s'
content.appendChild(letter)
}
* {
font-family: 'Segoe UI';
}
#content {
display: flex;
}
span {
text-transform: uppercase;
font-weight: 500;
animation: .3s 0s 1 text normal both running linear;
display: block;
}
@keyframes text {
0% {
transform: translateY(-40px) rotate(45deg);
opacity: .5;
}
}
<div id="content"><div>
Объяснение
Нельзя просто взять и написать
document.querySelector('div с текстом')
, нужно использоватьtextContent
(илиinnerText
, но лучшеtextContent
), чтобы получилось примерно так:document.querySelector('Какой-то селектор').textContent
[...text]
- это spread syntax, для "выворачивания" данных, в данном случае это текст, мы "выворачиваем" текст (...text
), то есть получаем каждую букву отдельно (Пример...'hello'
->h e l l o
), а дальше это всё мы получаем в массиве т.к. всё завёрнуто в квадратные скобки.
Полное объяснение кода:
Сначала берём текст (строку), далее в цикле for...in
, на каждой итерации получаем индекс текущего элемента массива. Создаём новый элемент <span>
, в текст ему записываем текущую букву обращаясь к [...text]
. Если текущий символ это пробел, тогда добавляем ему в стили margin: auto 3px
. Далее в стилях также указываем задержку для анимации чтобы буквы появлялись постепенно, сначала берём текущий индекс и делим его на 10, чтобы задержка была не слишком долгая, и в самом конце просто обращаемся к content
, (к слову, необязательно записывать в отдельную переменную элемент, у которого есть id
, можно просто написать его id
чтобы сразу к нему обратиться) и конечно же в content
добавляем текущий элемент. (Через DevTools (инструменты разработчика) вы можете конкретно увидеть результат в HTML)
Обновление
Только что заметил кое-что, у букв есть эффект подпруживания, и угол отличный от моего, так что вот второе более корректное решение:
let text = 'upcoming collection...'
let content = document.querySelector('#content')
for (let i in [...text]) {
let letter = document.createElement('span')
letter.textContent = [...text][i]
if(letter.textContent.match(/\s/)) {
letter.style.margin = 'auto 3px'
}
letter.style.animationDelay = i/10+'s'
content.appendChild(letter)
}
* {
font-family: 'Segoe UI';
}
#content {
display: flex;
}
span {
text-transform: uppercase;
font-weight: 500;
animation: .3s 0s 1 text normal both running linear;
display: block;
}
@keyframes text {
0% {
transform: translateY(-40px) scaleX(.7);
opacity: .5;
}
70% {
transform: scaleY(.7) translateY(2px);
}
}
<div id="content"><div>
Объяснение ко второму решению. (CSS Анимация)
С самого сначала текст немного прозрачный, находится на 40 пикселей выше чем обычно и сужен по x
координате на 30%, чтобы предать эффекта скорости. Далее сам текст уменьшается по y
координате на 30% и сдвигается немного вниз чтобы был эффект подпруживания, эффект прозрачности пропадает т.к. мы его больше не задаём. Далее когда анимация достигает завершения (100%), все стили пропадают, т.к. их на 100% мы не задавали.
-
Спасибо. То что нужно. Но не могли бы вы пояснить этот код (js только начал изучать). Можно ли вместо let text = 'upcoming collection...' написать let text = document.querySelector('div с текстом')? Что означает это выражение - [...text]?– NytnelavCommented 23 июл. 2022 в 6:19
-
@Nytnelav да конечно, сейчас объясню моменты прямо в вопросе чтобы не засорять комментарии.– ΝNL993Commented 23 июл. 2022 в 13:26
-
@Nytnelav и да кстати, если мой ответ решил вашу задачу, тогда, пожалуйста, нажмите на галочку слева от моего ответа.– ΝNL993Commented 23 июл. 2022 в 13:40
-
1
let text = 'upcoming collection...'
let content = document.querySelector('#content')
for (let i in [...text]) {
let letter = document.createElement('span')
letter.textContent = [...text][i]
if(letter.textContent.match(/\s/)) {
letter.style.margin = 'auto 3px'
}
letter.style.animationDelay = i/10+'s'
content.appendChild(letter)
}
* {
font-family: 'Segoe UI';
}
#content {
display: flex;
}
span {
text-transform: uppercase;
font-weight: 500;
animation: .3s 0s 1 text normal both running linear;
display: block;
}
@keyframes text {
0% {
transform: translateY(-40px) rotate(45deg);
opacity: .5;
}
}
<div id="content"><div>
-
добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 18 янв. 2023 в 23:05