Легкий эффект искажения воды

Ксения Кондрашова создала демо с красивым шейдером с эффектом воды. Это выглядит реалистично, как вода, движущаяся в бассейне. Это успокаивает и гипнотизирует.

3D-эффект параллакса при наведении

Темани Афиф создает удивительные эффекты, используя один тег изображения. Это отличный пример: один HTML-тег создает потрясающий трехмерный эффект… а код такой простой! Демо-версия требует всего 18 строк CSS!

Выборочная насыщенность при наведении

Еще одна классная демонстрация с использованием одного элемента изображения. Ана Тюдор использовала фильтры SVG, чтобы применить маску цветовой интерполяции и выделить элементы изображения на основе цвета.

Раздражающий картофель

Для этой забавной демонстрации Софии Вуд (она же Fractal Kitty) вам понадобятся колонки. Нажмите на кнопки звука или кнопки 1–8, чтобы заставить картошку говорить… но будьте осторожны, это может быть одинаково интересным и раздражающим.

Галерея колес (только CSS)

Анимированная круглая галерея, созданная Крисом Болсоном. Наведите курсор на картинки и посмотрите, как они оживляются. Мне нравится, как заголовок отображается рядом с движением фотографии. Гладкий.

пуантилизм изображения НАСА

Еще одно демо от Софии Вуд. Она использовала P5 для создания точек, которые генерируются бесконечно. В каждом цикле они будут уменьшаться, открывая космическую картину. Как обычно, творческое сочетание искусства и кода.

таблица проверки цветового контраста

Это скорее «занудная» демонстрация специальных возможностей: сетка со всеми названиями цветов CSS и их комбинацией цветового контраста. Дэйв Руперт использовал спецификацию WCAG 2.1 для определения результатов.

Знак «Мой двор»

Крис Койер повторяет этот знаковый знак, применяя анимацию, управляемую прокруткой, чтобы динамически настраивать шрифт всех строк (текст доступен для редактирования), чтобы все строки имели одинаковую ширину. Поскольку здесь используется свойство анимации-диапазона, эта демонстрация будет работать только в Chrome.

Стек анимированных карточек, управляемых прокруткой, с событиями прокрутки

Пол Ноубл создает потрясающую стопку карточек, сочетающую анимацию, управляемую прокруткой, с событиями прокрутки. Чтобы насладиться красивыми переходами, вам придется использовать трекпад (эта демонстрация не будет работать с мышью).

Быстрый двойной прогресс

Еще одно демо от Аны Тюдор. Код чистый, короткий и семантический. Мне понравился дизайн этого компонента (из вопроса на Reddit?), и я мог видеть, что использую что-то подобное в некоторых проектах.

Если вам понравился этот список, посмотрите демо-версии прошлого месяца!