Собрали идеи для оформления сайта, которые сделают его удобнее, красивее, и как минимум — интереснее. Анимация элементов, кнопки, слайдеры и прочее. Пользуйтесь!
Привет, это PR-CY! Мы создатели сервиса, который помогает поднять сайт в топ выдачи: проверяет оптимизацию под требования поисковиков, собирает проблемные URL и следит за позициями. Попробуйте!
Идеи для интересного оформления сайта:
Выдвижной блок
По клику на карточку появляется дополнительная подпись с классной анимацией. Похоже на деление клетки из биологии. Сделано на CSS.
Кнопка отправки
Кнопка для подтверждения действия, например, отправки сообщения. По клику отправляется бумажный самолет. Сделано на JS.
Кнопка оплаты
Анимация для кнопки оплаты: при наведении курсора появляется кассовый аппарат, по которому расплачиваются картой. Написана на чистом CSS, проблем с воспроизведением быть не должно.
Анимация кнопки
Мерцающая кнопка — интересный эффект появляется в ответ на наведение курсора. Стилизация выполнена с помощью фильтра SVG.
Кнопка согласия 🥳
Красивая анимация для клика по кнопке. Выглядит весёленько, реализовано с помощью CSS и JavaScript.
Анимация успешного действия
Пользователь кликает на кнопку и в ответ она выстреливает конфетти, которые мягко падают вниз.
Кнопка чата
Лаконичный дизайн с тенью и плавная анимация для перехода в кнопку закрытия чата. Сделано на CSS.
Слайдер
Красивый слайдер для дизайна портфолио или небольшой галереи с флагманскими товарами. По клику или скроллу меняется фон и сами товары.
Подсветка медиа
При наведении на карточку появляется красивый переливчатый эффект и тень. Реализован на CSS.
Галерея
Том Миллер создал галерею с эффектом слежки за мышью. Пользователь наводит на любое место изображения и видит миниатюру следующего. По клику следующая картинка развернется именно из этого места, куда он кликнул.
Цветовая двойственность текста
В некоторых дизайнах нужно такое разделение по цвету. Оставить текст, соответственно, в виде текста, но настроить вертикальное разделение цвета поможет Device Orientation — Split Vertical Layout. Реализовано с помощью CSS и JavaScript.
Анимация заголовка
Интересная анимация для букв, которая активируется по клику. В примере на каждой букве разный эффект. Сделано с JavaScript и CSS.
Анимация заголовка
Красочная анимация изменения текста по клику, написана на CSS.
Появление текста
Кое-что несложное, но красивое — анимация появления текста, привлекающая внимание. Написана на CSS. Можете использовать.
Смена текста
Этот сменяющийся по буквам текст привлечет внимание и поможет выделить какую-то важную для бренда фразу. Сделан с помощью JavaScript.
Анимация загрузки
Оригинальная анимация загрузки может скрасить ожидание и негативные эмоции от потери времени. Сделана на чистом CSS.
Интерактивный диапазон
Слайдер для установки ценового диапазона. Он как бы «резиновый», концы отрезка тянутся в разные стороны. Реализация с помощью jQuery, GSAP и TweenMax.js
Переключатель вариантов
Нашли забавные переключатели с беспокойной анимацией. Привлекают внимание и выглядят интересно — пользователи у конкурентов такого не видели. Сделаны на CSS.
Забавный переключатель 🐻
Вы переключаете чек-бокс, а мультяшный медведь переключает его обратно. Сначала просто лапкой, потом высовывается сам, а если переключать туда-сюда много раз, начинает хмуриться и ругаться.
Куда применить переключатель, который будет переключаться обратно — честно, не придумали. Но если вы найдете, как его применить в тему, пользователи наверняка остановятся на минутку поиграть и посмотреть, что будет. :)
Оцените пост, если понравилось, подпишитесь и попробуйте наш сервис для анализа сайта!