В этой статье мы собрали для вас коллекцию из 15 удивительных библиотек на JavaScript и CSS, с которыми нам довелось работать в мае. Каждая из них представляет различные решения фронтенд-задач и может быть большим подспорьем для начинающих и продвинутых разработчиков.
Библиотека на чистом CSS для добавления всплывающих подсказок к HTML-элементам. Hint имеет компактный размер, в тоже время предлагая множество вариантов настройки, таких, как различные размеры, цвета и анимации. Он не требует какого-либо кодирования, всплывающие подсказки создаются и стилизуются путем добавления нужных атрибутов данных.
С Turntable.js вы можете легко создавать классные вращающиеся демки для 3D-объектов путем размещения большого массива изображений, перемещающихся при движении мыши. Это позволяет пользователям быстро просмотреть весь набор картинок, демонстрируя продукт со всех сторон.
Magic - библиотека анимаций, которая полностью сделана из CSS. Это делает ее очень легкой и простой в использовании. Все анимации запускаются путем добавления или удаления классов, и могут быть настроены заменой дефолтных CSS правил.
Sausage является JQuery-плагином, который формирует кастомную полосу прокрутки и отслеживает какой раздел на странице мы читаем. Этот плагин может оказать большую помощь при проектировании большой документации или бесконечного веб-сайта с прокруткой, поскольку вертикальная пагинация сделает текст более структурированным.
Odometer - JavaScript библиотека, которая делает вертикальные переходы между числами. Она занимает мало места, является простой в установке, и создает эффектные переходы между цифрами, такие как на барабане игрового автомата или табло вокзала.
Все больше и больше сайтов используют в полноэкранном режиме слайд-эффект, когда один оборот колеса мыши меняет всю страницу. Эта библиотека является идеальным инструментом для реализации такой функциональности - она проста в использовании, имеет подробную документацию и хорошую браузерную поддержку.
Удивительная библиотека для создания привлекательных анимированных диаграмм. Для повышения производительности Chart.js использует элемент canvas, чтобы нарисовать все графики, но не требует от вас ничего знать о canvas и работе с ним. Все параметры настройки (а их тонна) управляются с помощью простого JavaScript API.
JavaScript-библиотека для создания Pinterest-подобных каскадных сеток. Работа с Bricklayer проста и в кратчайшие сроки вы будете иметь надежный, адаптивный макет. Она также не имеет внешних зависимостей, что делает ее легко интегрирущейся с Angular, React или любым другим фреймворком.
Flatmarket является проектом с открытым исходным кодом, который обеспечивает одну из самых дешевых и простых в эксплуатации платформ для электронной коммерции. Он состоит из статического веб-сайта для клиентов и Node.js сервера, который обрабатывает все платежи. Инструмент CLI доступен, что делает установку магазина с нуля гораздо проще.
Modaal - jQuery-плагин для создания модальных попап-окон. Включает в себя множество функций, которые обеспечивают доступность, читабельность и оптимизацию содержимого экрана. Modaal поддерживает навигацию с клавиатуры, атрибуты ARIA, а также фокусировку на нужном объекте.
Web Starter Kit представляет собой набор инструментов, которые помогут разработчикам быстро создавать свои проекты. Он разработан Google и специализируется на предоставлении фронтенд шаблонов, которые одинаково хорошо работает в различных устройствах и браузерах. Некоторые из библиотек, включенных в этот набор: MDL, Sass, Babel и gulp для автоматизации задач.
Это кнопка, которая превращается в диалоговое окно. Отличительной особенностью является переход, который меняется в зависимости от того, на какую часть кнопки пользователь нажал. Строго говоря, Flipside не является истинной библиотекой, но мы часто ей пользовались, поэтому и решили рассказать о ней. Если вы хотите использовать ее, исходный код доступен на GitHub.
Responsify - JQuery-плагин, который гарантирует, что изображение останется отзывчивым и содержание будет показано правильно. Это делается путем добавления спец-атрибута в тег <img>, который определяет зону фокусировки. Если изображение должно быть изменено, Responsify будет пытаться сохранить зону фокусировки видимой, и скроет части изображения, которые являются менее важными.
Стилизация <select> для всех браузерах по-прежнему астрономически раздражает HTML верстальщиков. К счастью, есть такой плагин, как Select2, который занимается этим вопросом и предлагает безболезненную стилизацию элемента select. Эта библиотека также имеет полезные дополнительные функции, такие как поиск, бесконечную прокрутку и поддержку Internet Explorer 8.
Vex - крошечный JQuery-плагин для создания всплывающих окон с псевдо-3D анимацией. Минифицированная и зазипованная, эта библиотека весит всего лишь 2Кb, поэтому ее ничего не стоит включить в проект. Vex имеет несколько доступных тем, но вы можете довольно легко добавить свои собственные настройки.