2

Подскажите как добиться такой анимации текста, как на этом сайте - https://alethemes.com/ale-fashion/ . Появление текста "upcoming collection...". Возможно ли такого добиться на чистом css? Или может есть какие-то сайты, ресурсы с готовыми подобными решениями.

2 ответа 2

8

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>

Объяснение

  1. Нельзя просто взять и написать document.querySelector('div с текстом'), нужно использовать textContent (или innerText, но лучше textContent), чтобы получилось примерно так: document.querySelector('Какой-то селектор').textContent

  2. [...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% мы не задавали.

4
  • Спасибо. То что нужно. Но не могли бы вы пояснить этот код (js только начал изучать). Можно ли вместо let text = 'upcoming collection...' написать let text = document.querySelector('div с текстом')? Что означает это выражение - [...text]?
    – Nytnelav
    Commented 23 июл. 2022 в 6:19
  • @Nytnelav да конечно, сейчас объясню моменты прямо в вопросе чтобы не засорять комментарии.
    – ΝNL993
    Commented 23 июл. 2022 в 13:26
  • @Nytnelav и да кстати, если мой ответ решил вашу задачу, тогда, пожалуйста, нажмите на галочку слева от моего ответа.
    – ΝNL993
    Commented 23 июл. 2022 в 13:40
  • 1
    Спасибо огромное!
    – Nytnelav
    Commented 24 июл. 2022 в 10:35
0

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>

1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 18 янв. 2023 в 23:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.