8 идей фронтенд-проектов для вдохновения

0
1882
views
javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

Перевод поста «8 Frontend Coding Ideas That Will Inspire You To Code».

Photo by Sigmund on Unsplash

Если вы фронтенд-разработчик и как раз обдумываете, что бы такого интересного создать, обратите внимание на эти проекты. Мы не призываем повторять их в точности (хотя тоже можно), но как источник вдохновения они вполне подойдут.

1. Анимированная строка меню

Это 60 FPS флюид-хедер с анимацией при переключении вкладок. Для достижения такого эффекта можно использовать либо CSS-анимации, либо JavaScript.

See the Pen Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl) on CodePen.

Чему вы научитесь, создав такую строку меню:

  • Гармонично использовать HTML, CSS и JavaScript.
  • Работать с SVG и CSS-анимациями, а также комбинировать их.

2. Кнопки в стиле киберпанк 2077

Прекрасные кнопки в стиле киберпанк. Обратите внимание на эффект при наведении и попробуйте воссоздать его. Если не знаете, как это сделать, подсмотрите в источнике.

See the Pen Pure CSS Cyberpunk 2077 Buttons 😎 by Jhey (@jh3y) on CodePen.

Чему вы научитесь, создавая эти кнопки:

  • Использовать CSS-переменные, ключевые кадры и clip-path.
  • Создавать сложные анимации при наведении.

3. Шахматная доска с фигурами

Интерес к шахматам возрос просто до небес после выхода мини-сериала «Ход королевы», созданного на основе одноименного романа Уолтера Тевиса. Если вы его еще не видели — обязательно посмотрите!

Задание со звездочкой: сделайте шахматную доску интерактивной.

See the Pen Cheap AI Chess! by Jake Albaugh (@jakealbaugh) on CodePen.

Чему вы научитесь, работая над этим проектом:

  • Создавать сетку 8 х 8. Попробуйте использовать для этого CSS Grid.
  • Вырезать шахматные фигурки при помощи CSS.
  • Если захотите сделать доску интерактивной — поработаете с JavaScript!

4. Пользовательский интерфейс панели для менеджмента проектов

Это панель для менеджмента проектов. С ее помощью вы можете мониторить проекты и переписываться с клиентами.

See the Pen Project Management Dashboard UI by Aybüke Ceylan (@aybukeceylan) on CodePen.

Чему вы научитесь, создавая такой интерфейс:

  • Строить UI при помощи CSS и HTML.
  • Использовать веб-сокеты для создания чата.

5. Неоморфная анимация

Неоморфизм (или нео-скеоморфизм) — новый виток в развитии реалистичного стиля в дизайне.

Работая над этим проектом, вы научитесь создавать плавные анимации при помощи CSS и HTML.

See the Pen 【css】Neumorphism_animation by masuwa (@ma_suwa) on CodePen.

6. HTML-Земля

See the Pen HTML Earth (Made with LUME) by Joe Pea (@trusktr) on CodePen.

Попробуйте создать Землю! Кстати, вы обратили внимание на периодически появляющуюся тень от Луны на поверхности Земли?

Чему вы научитесь, создавая HTML-Землю:

  • Использовать библиотеку LUME. Согласно README этого проекта на GitHub, LUME — это «набор инструментов, упрощающий создание интерактивных 2D или 3D изображений для любых устройств, а также для дополненной и виртуальной реальности».
  • Создавать 2D и 3D-объекты при помощи HTML, CSS и JavaScript.

7. «Текучие» вкладки с анимациями

Вы только посмотрите на эту красоту! Обратите внимание на маленькие детали при переключении вкладок.

See the Pen Tabbar by Aaron Iker (@aaroniker) on CodePen.

Чему вы научитесь, создавая такие вкладки:

  • Применять CSS transform для создания 60 FPS анимаций.
  • Создавать сложные анимации при помощи CSS или JavaScript.

8. Стакан воды

See the Pen Cup of Water by Zane Wesley (@zanewesley) on CodePen.

Осторожно: вызывает жажду! Попейте водички, прежде чем браться за этот проект.

Чему вы научитесь, работая над ним:

  • Использовать CSS для создания 60 FPS анимаций.
  • Использовать CSS transform и псевдоселекторы.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here