0

Доброго времени суток.

На сайте: https://greenthumb.themerex.net/ сверху есть слайдер, на нем появлется по буквам текст.

Как можно реализовать подобный эффект? В данном примере каждая буква разбита по своему контейнеру и появляется отдельно. Возможно есть аналогичные примеры для "разбора".

Желательно без jQuery.

1 ответ 1

3

function animateWord(word){
    let text = word.dataset.text;
    text.split('').forEach((letter,ind) => {
    let div = document.createElement('div');
    div.innerText = letter;
    setTimeout(()=> word.append(div),ind*200);
  })
}

const word = document.querySelector('.word');
animateWord(word);
@keyframes letter{
  0% {opacity: 0; transform: translateY(-15px)}
  100% {opacity: 1; transform: translateY(0px)}
}

.word div {
  animation: letter 0.5s;  
  display: inline-block;
}
<div class="word" data-text='Hello'></div>

Ваш ответ

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

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