Топ-10 веб-приложений на CodePen за 2021 год

Представляем наиболее популярные веб-проекты на HTML, CSS и JavaScript в CodePen за 2021 год.

1. Анимированная кнопка загрузки
2. Настройка силы притяжения
3. Волшебная карта
4. Прыгающее навигационное меню
5. Рождественская ёлка
6. Оригинально раскрывающийся слайдер
7. Клавиатура для слепой печати
8. PM дашборд
9. Слайдер с несколькими способами управления
10. С Новым 2022 годом!

1. Анимированная кнопка загрузки

Одна из самых нетривиальных кнопок загрузки, которая заставит пользователя не только остаться на странице, но и улыбнуться. Согласитесь, с таким решением ожидание будет не таким скучным.

2. Настройка силы притяжения

Визуально яркое веб-приложение, которое демонстрирует изменения в движениях мяча при увеличении силы притяжения. Надолго в нём залипнуть не получится, но потыкать настройки приятно.

3. Волшебная карта

Любопытный веб-проект, который собрал на CodePen в 2021 году массу лайков и комментариев. Градиентный неоновый свет красиво переливается за чёрным блоком, но стоит навести курсор, и мы видим название «Magic Card». UI карты сделал дизайнер из Mythrill.

4. Прыгающее навигационное меню

Интересное решение выпрыгивающих иконок меню при наведении на них курсора. Выглядит красиво, но есть один минус: нужно заново навести курсор на иконку, которая подпрыгнула вверх.

5. Рождественская ёлка

Ну и куда же без рождественской тематики? Вот такую замечательную анимированную открытку с украшенной ёлкой можно разместить на своём сайте. Прекрасное решение в праздничные дни!

6. Оригинально раскрывающийся слайдер

Мы как-то выпускали короткий урок по написанию слайдера на JavaScript. Честно говоря, вариант слайдера в этом веб-проекте из CodePen гораздо интереснее, поэтому он вошёл в тренды 2021. Кода там тоже прилично больше, зато для написания хватило всего пары строк на JavaScript.

7. Клавиатура для слепой печати

Интерактивное веб-приложение, которое подсвечивает букву клавиатуры, которую следует нажать, не глядя на саму клавиатуру. Методу слепой печати с нуля не научит, но действительно затягивает.

8. PM дашборд

Качественная реализация дашборда по работе с проектами. Есть два типа отображения: сеткой и списком. В каждой карточке предусмотрен процент выполнения. Есть чат и возможность выбрать тёмную тему.

9. Слайдер с несколькими способами управления

Ещё один веб-проект со слайдером на CodePen, который на данный момент собрал свыше 114 000 просмотров. Его особенность в том, что переключать слайды можно несколькими способами, в том числе и смахиванием в мобильной версии. Попробуйте сами:

10. С Новым 2022 годом!

Волшебная анимация, реализованная на HTML и CSS. С наступающим вас!