11 удивительных GitHub-репозиториев для создания прекрасного проекта

Photo by Mockaroon on Unsplash

Сегодня я бы хотел поделиться с вами замечательными репозиториями GitHub. С их помощью вы сможете задействовать в своем проекте сложные анимации и разные полезные функции.

Итак, приступим.

1. Lottie-Web/Bodymovin

Начну, пожалуй, со своего любимого репозитория. С помощью этой библиотеки можно экспортировать анимацию из Adobe After Effects прямиком в ваш сайт.

Примеры:

2. Hover.css

Коллекция hover-эффектов на CSS3, которые можно применить к ссылкам, кнопкам, логотипам, SVG-изображениям и т.д. Применяйте к своим элементам, дополняйте своими творениями или просто вдохновляйтесь. Доступно на CSS, Sass и LESS.

3. Magic Grid

Эта библиотека умеет создавать адаптивную сетку, в которой не придётся задавать стили через @media.  Просто укажите контейнер для неё и наслаждайтесь результатом.

4. Vue/React Content Loader

SVG-компонент для создания плейсхолдера загрузки, как в карточках Facebook.

Версия для React.js:

5. React Image Gallery

React-компонент «карусель» для просмотра изображений.

6. SVG.js

Легковесная библиотека для работы с SVG без внедрения зависимостей.

7. React Motion

Репозиторий, который запросто решит ваши проблемы с анимацией.

При использовании анимированных компонентов в 95% случаев нам не нужно прибегать к точному описанию каждого кадра.

Настройте для элемента UI лишь два параметра (damping и stiffness), а обо всем остальном позаботится магия физики. Таким образом, вам не нужно беспокоиться о мелочах. Это также значительно упрощает работу с API.

8. RELLAX

Rellax — это легковесная и простая JavaScript-библиотека для создания эффекта параллакса. Обновление: Rellax теперь работает и на мобильных устройствах (версия 1.0.0).

9. mo · js

Библиотека предоставляет компоненты (такие как html, shape, swirl, burst и stagger) для создания анимации. А ещё в ней есть всё необходимое для того, чтобы ваша анимация выглядела максимально естественно.

10. Reveal.js

Reveal.js — это open-source фреймворк для построения HTML-презентаций. С его помощью любой, у кого есть браузер, сможет бесплатно создавать полнофункциональные и красивые презентации.

11. Zdog

С этой библиотекой вы сможете даже без знания геометрии или алгебры создавать псевдо-3D элементы. Библиотеку легко освоить, так что ее изучение не займёт у вас много времени.

Заключение

Спасибо, что уделили время этой статье. Я настоятельно рекомендую начинающим frontend-разработчикам почаще применять такие готовые решения, а не хвататься за самостоятельную реализацию сложных задач. Так вы сможете избежать множества проблем.

Нет нужды заново изобретать велосипед.

Сокращенный перевод статьи 18 amazing GitHub repositories that will help you make a Beautiful Project. Некоторые репозитории были исключены из списка ввиду прекращения их поддержки.

От редакции TechRocks: ещё больше полезных материалов – в статье Лучшие инструменты для веб-разработки.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх