Сообщество веб-разработчиков полно талантливых программистов, дизайнеров и художников, создающих новое и толкающих веб вперед. Представляем вам подборку лучших работ с CodePen.
The Last Experience – небольшая анимация, изображающая человекоподобных роботов, движущихся в танце. Их можно вращать и даже подбрасывать мышкой.
Забавное демо, где можно разбить картинку на более маленькие части и делить ее до бесконечности. При каждом клике на изображение, оно будет генерировать четыре маленьких копии себя.
Это демо может нарисовать множество красивых цветастых деревьев. Если кликнуть по окну, сгенерируется новое дерево собственной формы и цвета. Таким образом можно сгенерировать столько деревьев, сколько захочется и экран не засорится – если деревьев станет слишком много, при создании нового одно из старых исчезнет.
Здесь отрисовываются различные персонажи Звездных Войн, каждый из которых соответствует определенной ширине окна браузера. Потяните за край окна, чтобы изменить ширину – и персонаж изменится!
«Зимние вести» погружают пользователя в зачарованный лес, в котором ему нужно пробудить сказочных лесных духов с помощью одной из нарисованных снежинок. Демо адаптировано для CodePen, хотя и загружает весь JavaScript со стороннего сервера.
Интерактивная цветная воронка на Canvas позволяет рисовать на ней мышкой и увеличивать площадь. для каждой точки код генерирует хвост и в движении демо выглядит как космический водоворот. Для точек можно отключить генерацию «хвостов», но даже так воронка смотрится не менее интересно.
Интерактивная трехмерная модель автомобиля, выполненная на чистом CSS и HTML верстке. Пользователь может взаимодействовать с моделью через чекбоксы: открывать двери, включать фары и даже двигать «камеру» ближе к авто.
Интересная демонстрация работы с цветами и формами на чистом CSS. Цветастый флаг, в некоторые моменты напоминающий старую эмблему Microsoft, крутится по часовой стрелке и уплывает в центр экрана.
Полезное демо, которое помогает увидеть результат смешения двух цветов. Нужно просто выбрать цвета из выпадающих окон, и фон поменяется на результат смешения, который также можно скопировать в hex-формате.
Красивый эксперимент с WebGL, реализованный на библиотеке ThreeJS. Сцена состоит из пиксельного льва и вентилятора, которым можно управлять, чтобы направлять потоки воздуха на животное.
Этот же автор делал для CodePen другие интересные демо, вроде Sneeze The Dragon и Cat vs Ball of Wool.
В этом демо сетка из цветных квадратов исполняет занимательную анимацию, проходя волнами от центра к краю сцены. Анимация реализована на CSS-свойствах: keyframe, transform и delay.
Еще одна демонстрация возможностей анимации ThreeJS. Трехмерный анимированный самолетик можно двигать с помощью мыши. Основной объект хорошо проработан: он имеет динамические тени и интересную анимацию движений.
Демо, имитирующее игру в которой нужно уворачиваться от препятствий на скорости. Персонаж съезжает с горки на сноуборде и должен на большой скорости уходить от столкновения с елками. За проведенное без столкновений время начисляются очки.
Интересное демо, попытка продемонстрировать перспективу в четырех измерениях. Анимация находчиво организована: основной объект совершает интересные переходы, играя с цветами и световыми эффектами.
Классическая «Змейка», реализованная на минимуме CSS и JavaScript.
Если вам интересны другие демо кода на CodePen, ознакомьтесь с нашей подборкой идей для практики веб-разработки.