Подборка исходников фишек для сайта

Привет, это PR-CY! Мы сделали сервис, который помогает сайтам выйти в топ: проверяет SEO, соответствие требованиям поисковиков, ошибки на внутренних URL и следит за позициями.

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

Простейший темный режим для сайта:

Меняется время суток при прокрутке страницы:

Перемена фона и товаров по клику или скроллу:

Световая дисперсия на фоне:

Выделение элемента при наведении мыши:

Range Slider с веревочкой для выставления диапазона:

"Резиновый" слайдер:

Кнопка лайка с лапкой, которую котик протягивает по клику:

Минималистичная подсветка кнопки по наведению курсора:

Кнопка подтверждения действия:

Анимация успешного действия:

Анимация оплаты:

Анимация с эффектом блеска при наведении:

Анимация по клику:

При наведении на карточку появляется переливчатый эффект и тень:

Слайдер, который можно листать с помощью клика или перемотки, захватив экран курсором:

Слайдер с переменой фона:

Анимация для букв с разным эффектом:

Сменяющийся по буквам текст:

Анимация появления текста:

Вы переключаете чек-бокс, а медведь переключает его обратно: сначала просто лапкой, потом высовывается сам, а если переключать туда-сюда много раз, начинает хмуриться и ругаться со звуком.

Эмоджи, которого можно поводить за нос:

Эффект объема для плоскости, которая поворачивается за курсором:

Макароны расплываются от курсора и плавают в тарелке супа:

Оцените пост, если было интересно! Ваши PR-CY 💓