Среди веб-разработчиков есть огромное количество действительно талантливых программистов и дизайнеров. Их работы уникальны, удивительны и поэтому очень интересны. Но, как говорится, лучше один раз увидеть. Поэтому в статье мы познакомим вас с демонстрациями CodePen, которые советуем посмотреть каждому.
Donut Progress Bar
В этой демонстрации реализован индикатор выполнения с меняющимися карточками. Чтобы увидеть его в действии, нажимайте на стрелки внизу: каждый раз изображения героев из мультсериала «Симпсоны» будут перекрывать друг друга.
Энергия 3
Яркое и красочное демо выводит на экран несколько блесток, которые хаотично перемещаются по окну и меняют цвет. Здесь просто потрясающая анимация – этим все сказано.
Всего лишь иллюзия
Нажмите левой кнопкой мыши и перетащите курсор в любом направлении. Так вы нарисуете несколько шариков, и они мгновенно начнут вращаться вокруг оси, размещенной по центру, создавая иллюзию трехмерного пространства. Чтобы результат был более интересным, добавьте еще сколько угодно объектов.
Выглядит, как живой
3D-глаз, который будто бы следит за перемещением курсора. Зрелище завораживает в первую очередь благодаря высококачественной детализации и эффектной графике.
Spiral Art Maker
Создавайте различные движущиеся узоры, изменяя количество линий, их ширину, скорость, число вращения и другие параметры. Вот где можно вволю поэкспериментировать!
Эффект живого экрана
На картинке изображен экран ноутбука, а на нем открыто окно с порталом CodePen. Благодаря матрице 3D, монитор функционирует, как настоящий, т.е. вы можете пролистать страницу, перейти по любой ссылке и даже посмотреть имеющиеся демонстрации.
Туннель
Отправляемся в путь по виртуальному, но весьма реалистичному туннелю. Перемещая курсор мыши можно «осматриваться» вокруг. Среди достоинств этого проекта выделим высокочастотные кадры без задержек показа.
Анимированный SVG Avatar
Перед нами забавная форма для авторизации пользователя, дополненная генерируемыми SVG-символами. Она реагирует на ввод электронной почты в соответствующее поле, а когда начинаешь указывать пароль, сразу закрывает глаза.
3D мигающий лось
Казалось бы, ничего сверхъестественного – самая простая пиксельная фигурка лося. Но мало того, что она трехмерная и так натурально бегает по кругу, так еще и если присмотреться, увидим динамическую тень и плавную, первоклассную анимацию.
Ударь кролика и спрячься
Мини-игра, в которой нужно попадать по выпрыгивающему снизу кролику и зарабатывать тем самым очки. Стремясь побить свой предыдущий рекорд, вы и не заметите, как по-настоящему увлечетесь процессом.
