Animate JS - мощный инструмент для создания анимаций на вашем сайте

Animate.js - это библиотека JavaScript, предназначенная для создания и управления анимацией на веб-страницах. Эта библиотека позволяет создавать анимационные эффекты, которые могут эффективно улучшить пользовательский интерфейс веб-страницы и улучшить пользовательский опыт.

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

1. Пример анимации текста

html

  
Hello World

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

javascript
var el = document.querySelector('.animated');
el.addEventListener('animationend', function() {
  el.classList.remove('animated', 'bounceInRight');
});

2. Пример анимации изображения

html

  

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

javascript
var el = document.querySelector('.animated');
el.addEventListener('animationend', function() {
  el.classList.remove('animated', 'fadeIn');
});

3. Пример анимации кнопки

html
Click Me

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

javascript
var button = document.querySelector('button');
button.addEventListener('click', function() {
  button.classList.add('animated', 'pulse');
});
button.addEventListener('animationend', function() {
  button.classList.remove('animated', 'pulse');
});

Кратко говоря, animate.js - это простой и удобный способ создания различных эффектов анимации с помощью JavaScript. Благодаря ему веб-разработчики могут украсить веб-страницы и улучшить пользовательский опыт работы с сайтом.