0

Раньше создавал анимацию просто добавлением класса, но сейчас я имею 37 элементов(анимация букв) и сделать это с каждой я считаю невозможно. Как мне сделать так, чтобы только при появлении элемента на экране начиналась анимация?

.animate span {
  display: inline-block;
}
.animate span:nth-of-type(1) {
  animation-delay: .01s;
}
.animate span:nth-of-type(2) {
  animation-delay: .05s;
}
.animate span:nth-of-type(3) {
  animation-delay: .1s;
}
.animate span:nth-of-type(4) {
  animation-delay: .15s;
}
.animate span:nth-of-type(5) {
  animation-delay: .2s;
}
.animate span:nth-of-type(6) {
  animation-delay: .25s;
}
.animate span:nth-of-type(7) {
  animation-delay: .3s;
}
.animate span:nth-of-type(8) {
  animation-delay: .35s;
}
.animate span:nth-of-type(9) {
  animation-delay: .4s;
}
.animate span:nth-of-type(10) {
  animation-delay: .45s;
}
.animate span:nth-of-type(11) {
  animation-delay: .5s;
}
.animate span:nth-of-type(12) {
  animation-delay: .55s;
}
.animate span:nth-of-type(13) {
  animation-delay: .6s;
}
.animate span:nth-of-type(14) {
  animation-delay: .65s;
}
.animate span:nth-of-type(15) {
  animation-delay: .7s;
}
.animate span:nth-of-type(16) {
  animation-delay: .75s;
}
.animate span:nth-of-type(17) {
  animation-delay: .8s;
}
.animate span:nth-of-type(18) {
  animation-delay: .85s;
}
.animate span:nth-of-type(19) {
  animation-delay: .9s;
}
.animate span:nth-of-type(20) {
  animation-delay: .95s;
}
.animate span:nth-of-type(21) {
  animation-delay: 1s;
}
.animate span:nth-of-type(22) {
  animation-delay: 1.05s;
}
.animate span:nth-of-type(23) {
  animation-delay: 1.1s;
}
.animate span:nth-of-type(24) {
  animation-delay: 1.15s;
}
.animate span:nth-of-type(25) {
  animation-delay: 1.2s;
}
.animate span:nth-of-type(26) {
  animation-delay: 1.25s;
}
.animate span:nth-of-type(27) {
  animation-delay: 1.3s;
}
.animate span:nth-of-type(28) {
  animation-delay: 1.35s;
}
.animate span:nth-of-type(29) {
  animation-delay: 1.4s;
}
.animate span:nth-of-type(30) {
  animation-delay: 1.45s;
}
.animate span:nth-of-type(31) {
  animation-delay: 1.5s;
}
.animate span:nth-of-type(32) {
  animation-delay: 1.55s;
}
.animate span:nth-of-type(33) {
  animation-delay: 1.6s;
}
.animate span:nth-of-type(34) {
  animation-delay: 1.65s;
}
.animate span:nth-of-type(35) {
  animation-delay: 1.7s;
}
.animate span:nth-of-type(36) {
  animation-delay: 1.75s;
}
.animate span:nth-of-type(37) {
  animation-delay: 1.8s;
}
.six span {
  opacity: 0;
  transform: rotate(-70deg) translate(65px, 0);
  animation: text-animation .5s forwards;
}


@keyframes text-animation {
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translate(0);
    opacity: 1;
  }
}
<div class="animate six">
                            <span>М</span><span>ы</span>&nbsp;<span>д</span><span>е</span><span>л</span><span>а</span><span>е</span><span>м</span> &nbsp; <span>в</span><span>а</span><span>ш</span><span>у</span>&nbsp;<span>р</span><span>а</span><span>б</span><span>о</span><span>т</span><span>у</span>&nbsp;<span>б</span><span>ы</span><span>с</span><span>т</span><span>р</span><span>е</span><span>е</span>&nbsp;<span>и</span>&nbsp;  <span>э</span><span>ф</span><span>ф</span><span>е</span><span>к</span><span>т</span><span>и</span><span>в</span><span>н</span><span>е</span><span>е</span>
                        </div>

1 ответ 1

3

Можно добавить js обернуть в функцию и вызвать когда нужно..

function go(str) {
  let cont = document.querySelector('.animate');
  let i = 0, delay = 100;

  for (var j = 0; j < str.length; j++) cont.innerHTML += (str[j] == ' ') ? '&nbsp;' : '<span>'+str[j]+'</span>';

  let span = document.querySelectorAll('.animate > span');

  let interval = setInterval(() => {
    if (i == span.length) return clearInterval(interval);
    span[i].setAttribute('class', 'anim');
    i++;
  }, delay);
}

go('Мы делаем вашу работу быстрее и эффективнее')
.animate span {
  display: inline-block;
  transform: rotate(-70deg) translate(65px, 0);
}

.anim {
  animation: text-animation .5s forwards;
}

@keyframes text-animation {
  100% {
    transform: rotate(0deg) translate(0);
  }
}
<div class="animate"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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