Пиксельный маскот
Пиксельный персонаж на canvas следит за курсором, реагирует на клик и меняется на другого пиксельным растворением
canvas-объектcanvas2djspointer
Лаборатория приёмов
34 приёма8 типов6 стеков
Интерактивные детали для сайтов. Выберите приём, обсудим, как встроить его в ваш проект. Код открыт (MIT).
Тлеющий портрет
пул мазков-угольков тлеет по процедурной маске, проявляя силуэт частицами
фонjscanvas2dnone
Карточки по таймеру
Слайдер мест: каждые 6 с маленькая карточка раскрывается на весь экран, заголовок поднимается строками
сценаcssjswaapiclick
Кольцо частиц за курсором
Поле бледных точек, по которому за курсором плывёт цветное кольцо чёрточек; клик пускает по нему волну.
фонwebgl2jspointer
Глаголы-актёры
Крупный глагол, и его буквы играют смысл: ВИДИТ, ТАЕТ, ПУГАЕТСЯ, ЗЛИТСЯ. Клик: следующий глагол.
текстcssjsclick
Живая ртутная капля
Капля жидкого хрома тянется за скоростью, сливается с близнецом через мостик и расходится, вокруг спутники.
canvas-объектwebgl2jspointer
Кольцо-окно, нарисованное пером
Перо рисует янтарное кольцо, в нём окно в следующий мир, камера ныряет в кольцо и там рисуется новое
переходcanvas2djsclick
Одна форма, девять интерфейсов
Одна форма без склеек: кнопка, лоадер, остров, плеер, громкость, табы, график, палитра, тост на пружинах
сценаcssjssvgnone
Одометр на пружинах
Число меняется, каждая цифра катится по своей пружине слева направо, с перелётом и успокоением
микроcssjsclick
Резиновый ползунок
Ползунок громкости тянется как резина за краем и пружинит назад со скоростью руки
компонентcssjspointer
Стена слов
Стена огромных слов: ряды едут навстречу друг другу, по биту один ряд переворачивается и меняет контур на заливку.
фонcssjspointer
Страница раскалывается на клинья
Макет сайта собирается набросками, вокруг точки кольцо, страница раскалывается на 7 клиньев с янтарными трещинами и срастается
переходcanvas2djsclick
Страница тонет по кускам
Вода поднимается по лёгкой странице: блоки отрываются, всплывают, тонут, потом всё встаёт на место
сценаcanvas2djspointer
Удар по стеклу
Удар раскалывает постер: трещины, осколки кувыркаются и тлеют по краю, под ними другая сцена
переходcanvas2djsclick
Бусина в доке
Таб-бар, где активную вкладку отмечает светящаяся бусина в гнезде кромки; гнездо едет за ней на пружине
компонентsvgjspointer
Кнопка-парашют
кольцо кнопки разворачивается в полосу прогресса, парашютик со стрелкой спускается на фронт заливки
микроsvgjsclick
Лоадеры из кривых
Четыре лоадера на canvas: хвост-комета бежит по Лиссажу, розе, спирали и эпициклам Фурье, клик открывает крупно
canvas-объектcanvas2djsclick
Нож между входом и регистрацией
тёмная панель одним translateX проезжает через карточку, в тёмный момент вход меняется на регистрацию
переходcssjsclick
Свет тянется к вкладке
Плоский таб-бар, где активную вкладку отмечает свет: кольцо тянется к новой вкладке каплей и меняет оттенок
компонентsvgjspointer
Сейф вместо полоски
индикатор силы пароля картинкой: от открытой двери до банковского сейфа, биты энтропии и время взлома
компонентsvgjsclick
Убегающая кнопка входа
кнопка «Войти» уворачивается от курсора, пока поля пусты; одно поле её замедляет, оба запирают на месте
компонентcssjspointer
Пугливая стая
Мальки реагируют на курсор с разными задержками, испуг бежит по соседям волной и гаснет от привычки
сценаcanvas2djspointer
Карточка-приглашение с бликом
Ссылка-карточка: поднимается, по ней проходит тёплый блик, стрелка уходит вправо-вверх
компонентcssjshover
Глитч: RGB-расщепление текста
заголовок расщепляется на красный/голубой каналы, слабая постоянная дрожь плюс редкие сильные сбои
текстcssjshover
Дверь, вспышка и качание лампы
дверь открывается, свет вспыхивает, лампа и луч качаются и затихают
сценаcssjsclick
Дрейфующие орбы
Размытые цветные пятна медленно дрейфуют на тёмном фоне, создавая глубину под контентом
фонcssjsnone
Курсор-прожектор на карточках
мягкое пятно света следует за курсором внутри карточки, один делегированный listener на всю сетку
компонентcssjshover
Нить-направляющая с реперами
вертикальная нить слева рисуется по scroll-таймлайну, реперы у абзацев вспыхивают при входе в кадр
скроллcssjsscroll
Оттиск-печать
слово в рамке шлёпается на страницу с наклоном и перелётом масштаба, каждые 4 с переставляется заново
микроcssjsclick
Скролл-морф частиц по главам
Поле частиц WebGL2 перетекает между формами-главами по мере скролла, само вращается и листает себя при простое
скроллjswebgl2scroll
Скрэмбл-декодирование заголовка
Заголовок расшифровывается посимвольно из случайных символов; автоцикл фраз, клик перезапускает.
текстcssjsclick
Стеклянная карточка с градиентной рамкой
Glass-card с вращающейся градиентной рамкой, вырезанной через mask-composite
компонентcsshover
Торшер со шнурком
Тянешь шнурок торшер качается и свет гаснет или загорается, каждые 6 секунд показывает это сам
компонентcssjsclick
Точечные глифы
текст из точек-LED, курсор разбрасывает их взрывом, точки плавно возвращаются на место
текстcanvas2djspointer
Ничего не найдено по заданным условиям