В современном мире идет борьба за привлечение внимание, и сайты не исключение. Вау-эффекты, залипательная анимация, все это все чаще и чаще встречается на сайтах. Но как же реализовать подобное? Начнем с простого — со списка популярных JS-библиотек для анимации.
GSAP.JS
Или же GreenSock Animation Platform, одна из самых популярных библиотек. С ее помощью можно анимировать все, что угодно:
- анимация текста — плавное появление/исчезновение, декодирование, эффект печатающего текста
- анимация положения — плавное перемещение по экрану
- анимация при скролле — появление, исчезновение, закрепление, увеличение или же уменьшение размера блока/элемента, в том числе, популярный в этом году, горизонтальный скролл
- анимация SVG
- интерактивные анимации — реакция на щелчки, передвижения мыши
- и многое другое
У библиотеки есть один минус — часть эффектов доступны платно, например, анимация SVG и некоторые текстовые анимации (нужно покупать годовую подписку).
Пример использования библиотеки можете посмотреть на главной странице моего сайта. Там я использую анимацию при скролле.
Matter.js
2D-движок физики для веб-приложений, созданный для реалистичного моделирования физических взаимодействий между объектами.
С помощью нее можно реализовать эффекты «падающих кнопок» или других элементов, сделать игру (аркады, платформеры, симуляторы) и пр.
Еще примеры: https://brm.io/matter-js/demo/#mixed
Anime.js
С помощью нее можно анимировать HTML, CSS, SVG, атрибуты, JS-объекты и многое другое. Отличается простотой использования, гибкостью и мощным функционалом.
Anime.js — это идеальный выбор для веб-разработчиков, которым нужно создавать плавные и красивые анимации с минимальными усилиями.
See the Pen Anime.js v2.0 logo animation by Julian Garnier (@juliangarnier) on CodePen.
Three.js
Мощная JavaScript-библиотека для создания 3D-графики. Она построена на базе WebGL, предоставляя разработчикам возможности для работы с трехмерными сценами, объектами, светом, текстурами и анимацией. С ее помощью можно создать интерактивные тренажеры, 3D презентации продуктов на сайте, визуализировать интерьеры, здания и пр., создать 3D-игры и симуляторы.
See the Pen Dreaming of Jupiter — Three.js by isladjan (@isladjan) on CodePen.