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

the-last-experience

The Last Experience – небольшая анимация, изображающая человекоподобных роботов, движущихся в танце. Их можно вращать и даже подбрасывать мышкой.

i-could-not-stop

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

trees

Это демо может нарисовать множество красивых цветастых деревьев. Если кликнуть по окну, сгенерируется новое дерево собственной формы и цвета. Таким образом можно сгенерировать столько деревьев, сколько захочется и экран не засорится – если деревьев станет слишком много, при создании нового одно из старых исчезнет.

star-wars

Здесь отрисовываются различные персонажи Звездных Войн, каждый из которых соответствует определенной ширине окна браузера. Потяните за край окна, чтобы изменить ширину – и персонаж изменится!

winter-tidings

«Зимние вести» погружают пользователя в зачарованный лес, в котором ему нужно пробудить сказочных лесных духов с помощью одной из нарисованных снежинок. Демо адаптировано для CodePen, хотя и загружает весь JavaScript со стороннего сервера.

orbital-trails

Интерактивная цветная воронка на Canvas позволяет рисовать на ней мышкой и увеличивать площадь. для каждой точки код генерирует хвост и в движении демо выглядит как космический водоворот. Для точек можно отключить генерацию «хвостов», но даже так воронка смотрится не менее интересно.

car

Интерактивная трехмерная модель автомобиля, выполненная на чистом CSS и HTML верстке. Пользователь может взаимодействовать с моделью через чекбоксы: открывать двери, включать фары и даже двигать «камеру» ближе к авто.

rainbow-star

Интересная демонстрация работы с цветами и формами на чистом CSS. Цветастый флаг, в некоторые моменты напоминающий старую эмблему Microsoft, крутится по часовой стрелке и уплывает в центр экрана.

color-averager

Полезное демо, которое помогает увидеть результат смешения двух цветов. Нужно просто выбрать цвета из выпадающих окон, и фон поменяется на результат смешения, который также можно скопировать в hex-формате.

lion

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

Этот же автор делал для CodePen другие интересные демо, вроде Sneeze The Dragon и Cat vs Ball of Wool.

squarebreath

В этом демо сетка из цветных квадратов исполняет занимательную анимацию, проходя волнами от центра к краю сцены. Анимация реализована на CSS-свойствах: keyframe, transform и delay.

tiny-poly-world

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

snow-mountain

Демо, имитирующее игру в которой нужно уворачиваться от препятствий на скорости. Персонаж съезжает с горки на сноуборде и должен на большой скорости уходить от столкновения с елками. За проведенное без столкновений время начисляются очки.

4d-perspective

Интересное демо, попытка продемонстрировать перспективу в четырех измерениях. Анимация находчиво организована: основной объект совершает интересные переходы, играя с цветами и световыми эффектами.

snake

Классическая «Змейка», реализованная на минимуме CSS и JavaScript.

Если вам интересны другие демо кода на CodePen, ознакомьтесь с нашей подборкой идей для практики веб-разработки.

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Современный подход к разработке с использованием Next.js