Новогодняя ёлка

Продолжаем тему новогодних проектов на CodePen. На этот раз у нас красивая анимация svg-ёлки, сделанная с помощью JavaScript-библиотеки GSAP.

Изучить подробнее можно тут:

https://tprg.ru/RP5T

#codepen

Камень-ножницы-бумага на чистом CSS

Изучите возможности CSS с помощью игры камень-ножницы-бумага, созданной без использования JavaScript. При этом компьютер не будет выбирать каждый раз один и тот же вариант. Как это сделано можно узнать тут:

https://codepen.io/alvaromontoro/pen/BaaBYyz

#codepen #css

Лоадеры на чистом CSS

6 лоадеров для вашего проекта, выполненные на чистом CSS с использованием @keyframes. Забирайте скорее:

https://codepen.io/AlexWarnes/pen/jXYYKL

#css #codepen

Современный аналог скринсейвера с медузами на Canvas

Все медузы, их передвижение и анимация движений реализованы на Canvas, представляя вашему вниманию подобие скринсейверов, которые когда-то были популярны.

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

https://codepen.io/justjspr/pen/JMBWEV

#codepen #canvas

Интересная реализация блока меню в виде стопки карточек

Первоначально пункты выглядят просто как стопка карточек, но при выборе определённого пункта меню лишние карточки смахиваются из области видимости, а выбранная занимает 100%.

Познакомиться с проектом поближе можно тут:

https://codepen.io/renatoruk/pen/WwyJjE

#codepen

Анимированный куб

Вот такой куб можно реализовать с помощью нескольких сложных CSS-анимаций. Да, в этом проекте нет JavaScript. Для уменьшения объёма кода и упрощения настройки здесь применяется препроцессор SCSS.

Подробнее можно посмотреть здесь:

https://codepen.io/davidkpiano/pen/aqNZxX

#codepen #css #scss

Красивая SVG-анимация страницы 404

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

https://codepen.io/brookjordan/pen/XNgmGq

#codepen

​Анимированная таблица Менделеева на JavaScript

В этом проекте каждый элемент анимирован в зависимости от агрегатного состояния вещества: твёрдого, жидкого или газообразного. Посмотрите, как это реализовано с точки зрения кода:

https://codepen.io/dilums/pen/oNzyeEv

#codepen #javascript

hello в стиле Apple

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

https://codepen.io/tripti1410/details/pordWpZ

#codepen

Необычный часы для вашего сайта

Эти часы выполнены в футуристичном стиле и представляют собой комбинацию SVG и ванильного JavaScript. Забирайте себе на сайт:

https://codepen.io/jkantner/pen/MWEmExB

#codepen

Анимированный рейтинг

Этот рейтинг выполнен с помощью SVG и библиотеки GSAP. С помощью него простой системе оценок добавляется некоторый эмоциональный отклик.

Посмотреть как это реализовано можно здесь:

https://codepen.io/ksenia-k/details/JjjyBoL

#codepen

Dark mode toggle switcher

Переключатель светлого и темного режима, реализованный на чистом CSS.

#CodePen

Карточка продукта на чистом CSS

Интересная карточка для оформления заказа на велосипед, которая позволяет сделать это с качественной визуализацией:

https://codepen.io/cobra_winfrey/pen/OJXJeod

#codepen #css

​Делов на 30 минут, а удовольствия на целый день: создаём игру для тренировки памяти на HTML, CSS и JavaScript

Memory Game — интересная игра, с неплохим дизайном и простой реализацией. CodePen проекта: https://codepen.io/abdullahturkmen/pen/YzxmRZj

#codepen #gamedev

Ужасный UX с непослушными кнопками

В представленном проекте автор реализовал мечту всех блогеров: здесь кнопка для отписки никогда не дастся вам в руки, зато кнопка «подписаться» так и просится, чтоб её нажать.

Посмотреть как это реализовано и попробовать победить кнопки можно тут:

https://codepen.io/jh3y/pen/KKvvPrP

#codepen

Карточки цен на чистом CSS

Простые, но стильные карточки товаров, выполненные с применением анимации на чистом CSS. Для работы с CSS в этом проекте использовался препроцессор SCSS. Вы можете сделать аналогичные карточки для вашего сайта:

https://codepen.io/jcoulterdesign/pen/NxMoja

#codepen #css

Красивый параллакс, работающий от скролла

В этом codepen-проекте автор реализовал анимацию смены времени суток с помощью скролла. Для создания анимации использовалась библиотека GSAP. Посмотреть, как это работает можно здесь:

https://codepen.io/isladjan/pen/abdyPBw

#codepen

Карточка с ховером запуска

Эту карточку вы сможете применить у себя на сайте. При наведении на неё изображении увеличивается, а также появляется кнопка пуск для запуска медиа. Реализована на HTML и CSS.

Подробности реализации здесь:

https://codepen.io/jh3y/details/NWMGxdL

#codepen

Menja — духовный наследник Fruit Ninja на JavaScript

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

Игра реализовано на JavaScript без сторонних фреймворков. Посмотреть на код и поиграть можно здесь:

https://codepen.io/MillerTime/details/BexBbE

#gamedev #codepen #javascript

Звёздная анимация для фона и меню.

#CodePen