12 анимированных компонентов дизайна пользовательского интерфейса JavaScript, которые вдохновят ваш следующий проект веб-дизайна 🎨✨
11 марта 2022 г.Современная веб-разработка перешла на компонентную архитектуру, что привело к более быстрой разработке, большему контролю и снижению затрат на обслуживание. В этой статье я выбрал некоторые из моих любимых компонентов пользовательского интерфейса для вашего вдохновения.
Я попытался включить различные типы некоторых из наиболее часто используемых компонентов в наш рабочий процесс разработки, включая карточки, текст, кнопки, флажки, значки, загрузчики и меню.
Для каждого компонента я предоставлю прямую ссылку, интерактивный предварительный просмотр, чтобы вы могли получить первоначальное впечатление на лету, а также ссылки авторов, чтобы вы также могли изучить больше их работы.
1. Слайдер карт
Автор [Айбуке Джейлан] (https://codepen.io/aybukeceylan)
https://codepen.io/aybukeceylan/pen/yLaqqOL
2. Зарегистрироваться/Войти
Автор: [FlorinPop] (https://codepen.io/FlorinPop17)
https://cod`epen.io/FlorinPop17/pen/vPKWjd
3. [Группа флажков] (https://codepen.io/havardob/pen/BapJYMg)
Автор: [Хавард Брюньюльфсен] (https://codepen.io/havardob)
https://codepen.io/havardob/pen/BapJYMg
4. Анимированная панель вкладок
Автор: [abxlfazl khxrshidi] (https://codepen.io/abxlfazl)
https://codepen.io/abxlfazl/pen/OJbEbxL
5. [Apple TV — ротация слов] (https://codepen.io/stevenlei/pen/RwpRgzy)
Автор: [Стивен Лей] (https://codepen.io/stevenlei)
https://codepen.io/stevenlei/pen/RwpRgzy
6. Текст курсора Spotlight
Автор: [Кэролайн Артц] (https://codepen.io/carolineartz)
https://codepen.io/carolineartz/pen/rNaGQYo
7. [Стеклянная карта] (https://codepen.io/creativeocean/pen/oNzjEYj)
Автор: [Том Миллер] (https://codepen.io/creativeocean)
https://codepen.io/creativeocean/pen/oNzjEYj
8. 3D оранжевый переключатель
Автор: [Йоав Кадош] (https://codepen.io/ykadosh)
https://codepen.io/ykadosh/pen/jOwjmJe
9. [Панель вкладок Jello] (https://codepen.io/flavio_amaral/pen/xxgYGrR)
Автор: [Флавио Амарал] (https://codepen.io/flavio_amaral)
https://codepen.io/flavio_amaral/pen/xxgYGrR
10. Простые загрузчики CSS
Автор: [Дженнинг] (https://codepen.io/jenning)
https://codepen.io/jenning/pen/YzNmzaV
11. Отзывы о реакции
[Аарон Икер] (https://codepen.io/aaroniker)
https://codepen.io/aaroniker/pen/qBjyKGO
12. Светящиеся иконки CSS
Автор: [Кришна Гупта] (https://codepen.io/Krishnaa_Gupta)
https://codepen.io/Krishnaa_Gupta/pen/MWoRqmr
Писать всегда было моей страстью, и мне доставляет удовольствие помогать и вдохновлять людей. Если у вас есть какие-либо вопросы, не стесняйтесь обращаться!
Если вы нашли их полезными, свяжитесь со мной в Twitter, LinkedIn и GitHub!
Посетите мой Блог для получения дополнительных статей, подобных этой.
- Впервые опубликовано [здесь] (https://madza.hashnode.dev/12-gorgeous-ui-components-for-your-design-inspiration)*
Оригинал