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

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

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

Для всей страницы

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

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

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

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

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

Для интерфейса

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

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

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

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

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

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

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

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

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

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

Для галереи

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

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

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

Для текста

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

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

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

Для развлечения

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

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

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

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

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

146146
18 комментариев

Вот, без всяких анимаций и свистоперделок заставит вас проснуться и придаст бодрости:

49

Чет в голос. А ты харош ))

3

Большинство этих «фишек» — дико бесполезный шлак, который не дай бог кто использует в интерфейсе. Да и, в целом, сначала нужно сделать нормально, а потом уже рюшечки вставлять

22

Комментарий недоступен

7

Лайк лапкой за лайк с лапкой

6

Кнопка с лапкой покорила мое сердечко 🐾

6

99% бред ненужный и лишний.

4