Ширина/высота экрана (только CSS)

Темани Афиф обычно появляется в этом списке вместе с демонстрациями CSS. На этот раз благодаря чему-то впечатляющему: комбинируя пользовательские свойства с функциями at-property и тригонометрическими функциями, он может отображать высоту и ширину экрана… никакого JavaScript!

Интерактивные объекты WebGL

Наведите курсор мыши на эти милые шарики, чтобы увидеть, как они реагируют и двигаются (даже больше, чем сейчас). Это забавная демонстрация WebGL от Ксении Кондрашовой, которую можно использовать в качестве интерактивного (и отвлекающего) фона на веб-сайте.

Взлом цитат из фильмов

Если вам нравятся цитаты из фильмов и динамичные игры с палачами, эта демо-версия Александра Вакассена для вас: угадайте цитату из фильма, нажимая на буквы (без клавиатуры, афаик). Но будьте осторожны: на выполнение задания у вас будет одна минута, а каждая неудачная попытка отнимет 5 секунд.

Кольцевой лабиринт

Еще одна игра, на этот раз от ZIM. Этот трехмерный лабиринт, созданный с помощью ThreeJS, имеет форму кольца. В этой занимательной демонстрации, созданной для игры CodePen, шарик будет следовать за мышью по лабиринту (иногда это может быть непросто).

Эффект наведения навигации

Вероника Христова написала код этой интерактивной навигации. Он использует псевдоэлементы ::before и ::after для дублирования текста, указанного в атрибуте данных, и создания красочного трехмерного эффекта при наведении курсора мыши. Просто и круто.

Three.Js Blobby Apple

Это еще одно демо от Ксении Кондрашовой. Покрутитесь вокруг этого яблока, которое плавно движется при вращении, теряя свою форму и приобретая новую — хороший эксперимент с ThreeJS.

Приложение Bill Splitter

Вдохновленный дизайном, найденным на Dribbble (ссылка на него есть в описании codepen), Дилум Санджая написал живую версию этого разделителя счетов, используя React и Tailwind. Выглядит аккуратно.

Воробей

В последнее время в этой серии было мало CSS-арта, и этот красивый рисунок воробья от Алины — замечательное возвращение. На основе рисунка с Behance (ссылка в коде) простота кода контрастирует с чистотой рисунка. Потрясающая работа.

Существо из лагуны ИК

Двигайте мышью по экрану и смотрите, как это существо/капля следует за ней. Первоначально прикрепленный к верхушке, этот червь (? пиявка? существо!) будет отделяться и расти по мере движения. Эту демоверсию разработал Лиам Иган.

3D Дженга — CSS

3D CSS-игра, разработанная Josetxu. Хотя в Дженгу невозможно играть полностью, вы можете нажать на средние части, которые будут анимироваться и двигаться (затем вы можете затолкнуть их обратно внутрь в «обратной Дженге»).

Если вам нравятся эти демоверсии, прочтите предыдущую статью с 10 крутыми демоверсиями CodePen за июнь 2024 года!