0

На этом сайте есть текст "My, myself & I".

Как сделать свой текст таким же анимированным как на этом сайте?

Чтобы буквы также подпрыгивали при наведении на них?

1 ответ 1

3

Стили взял прям из примера, а на js просто добавлять и удалять класс при наведение. Вот пример:

document.querySelectorAll('.blast').forEach(el => {

  el.addEventListener('mouseenter', function() {
    el.classList.add('rubberBand', 'animated');
  })
  el.addEventListener('mouseleave', function() {
    el.classList.remove('rubberBand', 'animated');
  })

})
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.blast {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 50px;
  opacity: 1;
  display: inline-block;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        -ms-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        -ms-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        -ms-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        -ms-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        -ms-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}
<span class="blast">М</span>
<span class="blast">О</span>
<span class="blast">Л</span>
<span class="blast">О</span>
<span class="blast">Д</span>
<span class="blast">Е</span>
<span class="blast">Ц</span>

P.S: @NDMX правильно заметил - мой пример не совсем верно отрабатывал как в примере, спасибо.

Правильный вариант из примера:

document.querySelectorAll('.blast').forEach(el => {
  el.addEventListener('mouseenter', function() {
    el.classList.add('rubberBand', 'animated');
    setTimeout(() => {
      el.classList.remove('rubberBand', 'animated')
    }, 1000)
  })
})
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    -ms-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    -ms-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    -ms-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1)
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    -ms-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    -ms-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.blast {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 50px;
  opacity: 1;
  display: inline-block;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out
}
<span class="blast">М</span>
<span class="blast">О</span>
<span class="blast">Л</span>
<span class="blast">О</span>
<span class="blast">Д</span>
<span class="blast">Е</span>
<span class="blast">Ц</span>

12
  • 1
    Не совсем так работает, как в оригинальном примере. Думаю нужно добавить setTimeout в событии mouseleave, чтобы анимация проигрывала полностью, а не заканчивалась, когда указатель уходит с элемента.
    – NDMX
    26 июл 2022 в 19:11
  • @NDMX да, точно. У меня сразу удаляется если убрать а там проигрывает анимация. Спасибо - сейчас подправлю 26 июл 2022 в 19:13
  • Не могу понять,я скопировал всё также,как у вас и вставил в html css и js,но у меня по какой-то причине не работает анимация
    – user508572
    26 июл 2022 в 19:51
  • @Zesshi точно все верно скопировали? css и js верно подключены? Ошибки есть в консоли? 26 июл 2022 в 19:58
  • Я нашёл ошибку,почему-то если я добавляю через <script> </script> в самом html всё работает,а когда подключаю непосредственно js через отдельный файлл ничего не работает
    – user508572
    26 июл 2022 в 19:59

Ваш ответ

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