10 классных проектов на CodePen

Среди веб-разработчиков есть огромное количество действительно талантливых программистов и дизайнеров. Их работы уникальны, удивительны и поэтому очень интересны. Но, как говорится, лучше один раз увидеть. Поэтому в статье мы познакомим вас с демонстрациями CodePen, которые советуем посмотреть каждому. 

Donut Progress Bar

В этой демонстрации реализован индикатор выполнения с меняющимися карточками. Чтобы увидеть его в действии, нажимайте на стрелки внизу: каждый раз изображения героев из мультсериала «Симпсоны» будут перекрывать друг друга.

Ссылка на проект

Энергия 3

Яркое и красочное демо выводит на экран несколько блесток, которые хаотично перемещаются по окну и меняют цвет. Здесь просто потрясающая анимация – этим все сказано.

Ссылка на проект

Всего лишь иллюзия

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

Ссылка на проект

Выглядит, как живой

3D-глаз, который будто бы следит за перемещением курсора. Зрелище завораживает в первую очередь благодаря высококачественной детализации и эффектной графике.

Ссылка на проект

Spiral Art Maker

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

Ссылка на проект

Эффект живого экрана

На картинке изображен экран ноутбука, а на нем открыто окно с порталом CodePen. Благодаря матрице 3D, монитор функционирует, как настоящий, т.е. вы можете пролистать страницу, перейти по любой ссылке и даже посмотреть имеющиеся демонстрации.

Ссылка на проект

Туннель

Отправляемся в путь по виртуальному, но весьма реалистичному туннелю. Перемещая курсор мыши можно «осматриваться» вокруг. Среди достоинств этого проекта выделим высокочастотные кадры без задержек показа.

Ссылка на проект

Анимированный SVG Avatar

Перед нами забавная форма для авторизации пользователя, дополненная генерируемыми SVG-символами. Она реагирует на ввод электронной почты в соответствующее поле, а когда начинаешь указывать пароль, сразу закрывает глаза. 

Ссылка на проект

3D мигающий лось

Казалось бы, ничего сверхъестественного – самая простая пиксельная фигурка лося. Но мало того, что она трехмерная и так натурально бегает по кругу, так еще и если присмотреться, увидим динамическую тень и плавную, первоклассную анимацию.

Ссылка на проект

Ударь кролика и спрячься

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

Ссылка на проект