В этой статье мы собрали для вас коллекцию из 15 удивительных библиотек на JavaScript и CSS, с которыми нам довелось работать в марте. Каждая из них представляет различные решения фронтенд-задач и может быть большим подспорьем для начинающих и продвинутых разработчиков.
Hamburgers представляет собой набор из более чем 20 гамбургер-кнопок. Все они имеют уникальные, хорошо сделанные анимационные эффекты на чистом CSS для максимально плавной анимации при клике. Sass версия также доступна для тех, кто использует препроцессоры в своих проектах.
Это большой ресурс, содержащий большой выбор хорошо продуманных индикаторов загрузки на CSS. Добавление их на свой веб-сайт или приложение очень просто и, вероятно, единственное, что может вызвать затруднение - это выбор подходящего загрузчика (наш любимый pacman один из них).
Grd, как это следует из названия, предназначена для создания сетки при верстки. Библиотека выполнена на чистом CSS, использует свойства flexbox модели, и предлагает только самые необходимые и полезные функции. Все эти факторы приводят к очень малому размеру фреймворка - всего 512 байт, если сжать gzip.
С Superplaceholder вы можете добавить одно или несколько сообщений по вашему выбору в качестве плейсхолдера для полей ввода. Библиотека будет отображать эти сообщения используя крутую анимацию: как будто текст кто-то печатает. Благодаря обширным настройкам, у вас есть полный контроль над тем как и когда будут показаны анимации.
Slick, пожалуй, самый сложный и многофункциональный плагин карусели. Он позволяет манипулировать огромным колличеством настроек, но делает это удобным для пользователя способом, благодаря хорошо продуманному API.
Эта футуристическая библиотека позволяет создавать сайты виртуальной реальности с использованием веб-технологий. После того как вы создали свой 3D-мир в HTML, A-frame попросту разделит экран на две части со слегка отличающимися углами обзора. Теперь вы можете запустить демо-версию на своем мобильном телефоне с помощью очков виртуальной реальности Google Cardboard или другой гарнитуры и окунуться в мир виртуальной реальности с головы до ног.
Бесконечные прокрутки не пользуются популярностью как у разработчиков, так и пользователей, послольку их трудно реализовать и они редко бывают удобными. LavaLamp представляет собой JavaScript-плагин, который предлагает хорошую альтернативу бесконечной прокруткb. Вместо автоматической загрузки нового контента, вы можете добавить кнопки в верхней и нижней части страницы для загрузки предыдущих и следующих пунктов.
Drift является JavaScript-библиотекой с открытым исходным кодом для добавления эффектов увеличение при наведении и линзы к изображениям вашего сайта. Она поддерживается многоми браузерами, проста в реализации и не требует дополнительных библиотек.
С помощью этой библиотеки вы можете добавить прогресс бары в любой HTML элемент, в том числе такие сложные, как поля ввода, изображения и видео. Оформления индикаторов прогресса могут быть изменены либо с помощью опций библиотеки, либо с помощью пользовательских CSS стилей.
Min - самым компактный (995 байт кода) в мире CSS фреймворк, который содержит классическую 12-колоночную сетку, большое количество компонентов и поддерживается большим колличеством браузеров.
Эта JavaScript и CSS библиотека предлагает новый взгляд на отзывчивое меню навигации. Вместо того чтобы создавать меню, которое полностью отображается на рабочем столе и прячется на мобильном телефоне. OkayNav пытается показать как можно больше элементов навигации, насколько это возможно в текущем окне браузера.
Библиотека CSS для создания расширенных макетов сетки. С Pintsize у вас есть возможность создавать как Bootstrap подобные сетки, так и flexbox сетки, которые адаптируются к размеру содержимого. На сайте проекта есть хорошие примеры раздел включая поддержку браузера и фрагменты кода.
Velocity - анимационный движок JavaScript, который сочетает в себе хорошо известный API JQuery animate()
, с CSS-анимациtq, чтобы обеспечить быстрые, надежные и простые в использовании переходs. Если вы bcgjkmpetnt JQuery только для анимации элементов, вы можете легко переключиться на Velocity для повышения производительности.
Balloon.css - CSS библиотека, которая позволяет разработчикам добавлять всплывающие при наведении подсказки (tooltip) к элементам на странице без подключения JavaScript-библиотек. При добавлении атрибутов данных в HTML вы можете определить содержание, направление всплывающих окон и другие параметры настроек.
Маленькая JavaScript-библиотека для SVG анимации, выглядящая так, будто была нарисована от руки. В библиотеке есть много различных настроек и стилей анимации, а также есть функция, позволяющая создать собственный стиль.