Анимация — один из ключевых трендов 2018 года, но вам нет неоходимости изобретать колесо, чтобы добавить динамики своим сайтам. Здесь Вы узнаете о лучших бесплатных библиотеках веб-анимации.
С их помощью можно делать сумасшедшие вещи с пользовательским интерфейсом своих сайтов. Эти вещи уже стали нормой современных веб-сайтов, где взаимодействию с пользователем уделяется огромное внимание.
Если вы оглядитесь вокруг, то найдете множество генераторов кода и . Но, кроме них можно найти массу бесплатных библиотек, которые экономят ваше время в процессе кодирования.
Предлагаю Вам 10 своих вариантов лучших библиотек с открытым исходным кодом для веб-анимации. В них наблюдается гармоничное сочетание JavaScript и анимации только с применением CSS. Оба эти стиля великолепны, но у обоих есть свои преимущества и недостатки.
В любом случае я гарантирую, что предложенный список будет Вам полезен.
Библиотека GSAP — один из самых крутых бесплатных ресурсов, доступных разработчикам. Она работает исключительно на JavaScript и это одна из наиболее надежных библиотек анимации, которую вы можете использовать.
Библиотека работает поверх HTML5 и хорошо принимается всеми современными браузерами, не говоря уже о том, что команда постоянно добавляет новые функции в обновлениях. Она может работать с SVG, элементами canvas, даже, совместима с объектами jQuery и с другими подобными библиотеками, например, .
Определенно стоит обратить на неё внимание, если нужна мощная библиотека веб-анимации. Однако, для простых задач есть множество маленьких библиотек, которые вы можете с успехом попробовать.
Когда я впервые нашел Anime.js, то был приятно удивлён. Эта невероятно мощная вещь, выходящая за рамки простой анимации UI/UX.
С Anime.js можно создавать искусные анимации с логотипами, кнопками, изображениями, с чем вы захотите. Код поддерживает все типичные пользовательские триггеры такие, как clicks/hovers/swipes и у вас есть доступ к куче настраиваемых анимаций.
Если вы ознакомитесь с документацией, то найдёте массу примеров встраивания прямо в страницу. Плюс имеется коллекция на CodePen, наиболее полная для Anime.js.
Вот одна из новых библиотек с акцентом на использование только чистого кода CSS. Wicked CSS работает поверх свойств CSS3, показывая невероятные трюки.
На главной странице вы найдете кучу живых демонстраций, которые можно проверить прямо в браузере. К ним относятся повороты объектов, перевороты, слайд-модули и множество подобных эффектов анимации.
Некоторые из них достаточно просты, чтобы вы смогли сделать их самостоятельно. Другие представляют собой довольно сложный комплекс, и то самое, что делает библиотеку Wicked CSS очень веселой для развлечений.
Возможно, окончательным ресурсом для веб-анимации является Animate CSS. Эта библиотека с открытым исходным кодом была выпущена несколько лет назад, но все еще наиболее актуальна, чем что-либо ещё.
Daniel Eden, разработчик стилей, создал этот проект как упрощенный способ добавления пользовательских CSS3 на веб-страницу. За эти годы набор стилей превратился в полноценную библиотеку анимации с достаточной мощностью для работы в любом крупном проекте.
Домашняя страница предлагает множество демо, так что вы можете проверить стили анимации, посмотреть и оценить её мощь. Кроме того, на GitHub есть масса отличной документации, включая список классов и некоторые примеры фрагментов кода.
Единственное, что больше всего мне нравится в Tuesday — простота. С помощью этой библиотеки вы контролируете появление и исчезновение элементов на странице.
Но эти анимации не являются сверх-топовыми или супер-гламурными. Вместо этого они упакованы в приятный тонкий посыл, который действительно улучшает эстетику страницы, не отвлекая от контента или пользовательского опыта.
Я не видел большого количества веб-сайтов, использующих Tuesday, но это, пожалуй, самая чистая библиотека.
Она работает на чистом CSS, где стили анимации чертовски разумны. Они могут сочетаться с любым сайтом, у вас есть более десятка стилей fade in/fade out для работы.
Я не видел более веселой и странной библиотеки CSS, чем CSShake. Это одной стороны она сумасшедшая, а с другой уникальная и поэтому, вероятно, не может быть использована на любом веб-сайте.
Единственная причина, по которой библиотека включена в мой список, заключается в том, что я не могу думать о какой-либо другой подобной библиотеке с имеющимися здесь функциями. При наведении указателя на объект с CSShake можно создать эффекты встряхивании видов и все это работает на чистом CSS.
От мягких движений до энергичного встряхивания и всего, что между ними есть в этой библиотеке довольно легкой при установке и загрузке.
Из множества библиотек JavaScript для анимации я должен сказать, что Mo.JS одна из лучших. Эта библиотека имеет широкое распространение и на самом деле предназначены для анимации графики и пользовательского интерфейса.
Вы можете использовать её для чего угодно, если узнаете, как она работает. Кодом довольно просто манипулировать, есть куча учебников, которым вы можете следовать, чтобы облегчить свою жизнь.
Это идеальная библиотека анимации? Едва ли.
Однако у него есть множество удивительных функций, которые действительно упрощает процесс анимации, независимо от того, с чем вы работаете, с навигационной панелью, логотипом или каким-либо другим сложным объектом.
Супер легкая библиотеку анимации Animate Plus. Она весит всего 2 Кб, но имеет все основные функции, которые ожидаются от пользовательской анимации на JavaScript.
Её легко установить с помощью npm и настроить под себя из фрагментов кода на GitHub. Большинство из них — всего лишь основные демо, поэтому они не попадают ни в что сложное, но вы можете найти все варианты и методы обратного вызова прямо на GitHub.
Посмотрите на этот демо-пример и вытащил прямо из фрагмента кода в главном репозитории. Это не сложно, но он покажет, как настроить Animate Plus и запустить немного кода по умолчанию с нуля.
С Bounce.js вы можете сделать мощные CSS3 и JS анимации всего за несколько кликов.
На главной странице вы найдете пользовательский построитель анимации с фокусом в первую очередь на модулях. Таким образом, Вы можете добавить на страницу определенные функции анимации без добавления дополнительного кода.
Самая большая разница с Bounce.js заключается в том, что он не работает как просто библиотека. Хотя вы можете найти информацию по установке на GitHub, это не просто базовый сценарий. Он на самом деле поставляется с веб-строитель так отказов является одним из немногих библиотек анимации вы можете стилизовать в вашем браузере.
Забавная анимация с примесью игривости — вот, как лучше всего можно описать библиотеку Magic.
Вся эта коллекция фокусируется на анимации CSS3, при этом выдвигая пользовательские стили, которые не могут быть найдены в другом месте. Это довольно большая коллекция кодов CSS3, и вы найдете здесь много аккуратных трюков. Повороты, перспективы переворачивания, эффекты исчезновения и много чего ещё.
Если вы посмотрите на , то можете проверить некоторые из этих эффектов в действии.
Конечно, эта библиотека по-прежнему намного меньше, чем другие библиотеки CSS3, поэтому она не может конкурировать с Tuesday или Animate.css. Но здесь есть много аккуратных веб-анимации, которые вы просто не найдете в других библиотеках.
По мотивам:
10 лучших бесплатных библиотек web-анимации, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.
Респект и уважуха
