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

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

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

Шаг 1. HTML

Для начала нам нужно воссоздать разметку и построить иерархию пунктов, у нас будет кнопка и подпись к ней, все это будет заключено в контейнер:

Для демонстрации мы привели один пункт, в демонстрации мы используем несколько, по структуре они идентичны, просмотреть их можно в исходниках.

Как создать анимированный фильтр для сайта RUDEBOX1

Шаг 2. CSS

Для начала мы определяем параметры начального фильтра, позиционирование и подключаем сторонние шрифты, затем мы формируем окружность для выбора, и устанавливаем цветовую палитру для каждого чека:

Также для окружностей выбора мы устанавливаем параметры анимации при выборе, также устанавливаем анимацию для кнопки разворота (крестика).

Шаг 3. JS

Последим шагом будет создание анимации при развороте списка, за это будет отвечать небольшая часть кода:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.