—»     —»   Анимированные чекбоксы и радио-кнопки на SVG
  Раздел: Руководства   Нет комментариев  

Анимированные чекбоксы и радио-кнопки на SVG



Сегодня мы хотим поделиться с вами забавными анимациями для чекбоксов и радио-кнопок. Суть заключается в том, чтобы анимировать SVG для создания привлекательных визуальных эффектов для выделения чекбоксов или элементов радио-ввода. Анимированная графика предлагает множество возможностей, включая заполнение поля крестиком, галочкой, точкой и так далее. Мы используем технику анимирования SVG-путей от Jake Archibald, и вы можете узнать, как работает этот метод в его статье “Animated line drawing in SVG”.

Анимированные чекбоксы и радио-кнопки на SVG

Пожалуйста учтите, что это всего лишь попытка доказать жизнеспособность данного концепта, а не полноценное решение. Анимация SVG-путей может работать не во всех браузерах, особенно если речь идет о мобильных браузерах.

Для кастомного чекбокса или радио-кнопки мы используем псевдо-элемент ярлыка ::before и скрываем элемент ввода, устанавливая opacity на 0. Он на самом деле находится здесь, поверх псевдо-элемента, так что мы можем просто кликнуть по нему и получить стандартное поведение элемента выделения. Мы также можем сделать ярлык кликабельным, установив значение атрибута в ID элемента ввода.

Изначально мы при помощи javascript также добавляем необходимые SVG-элементы после элементов ввода. Их не будет видно, так как их пути пустые. Как только мы выделяем элемент ввода, мы анимируем пути посредством соответствующего перехода.

Давайте взглянем на пример структуры формы:

<form class="ac-custom ac-checkbox ac-cross">
<h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
<ul>
<li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Efficiently unleash information</label></li>
<li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Quickly maximize timely deliverables</label></li>
<li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Dramatically maintain solutions</label></li>
<li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">Completely synergize relationships</label></li>
<li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Professionally cultivate customer service</label></li>
</ul>
</form>

Мы используем ненумерованный список с элементами ввода и ярлыками.

Базовые стили для того, чтобы делать элемент ввода невидимым и создания блока из псевдо-элемента, следующие:

.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 80px;
vertical-align: top;
color: rgba(0,0,0,0.2);
cursor: pointer;
transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
opacity: 0;
display: inline-block;
vertical-align: middle;
z-index: 100;
}

.ac-custom label::before {
content: '';
border: 4px solid #fff;
transition: opacity 0.3s;
}

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
color: #fff;
}

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
opacity: 0.8;
}

Как видно, мы используем смежный родственный селектор для определения ярлыка и его псевдо-элемента. Этот метод может быть глючным в некоторым браузерах, поэтому вам следовало бы добавить элемент ввода внутри ярлыка, как показано в примере B на странице label в wiki: HTML/Elements/label - W3C Wiki.

С последним примером мы заметили небольшое искажение в Firefox (24.0) в mac. По какой-то причине, концовка SVG-рисунка на какой-то момент появляется еще до того, как к ней применяется анимация.

Давайте взглянем на несколько скриншотов стилей:

Ручная обводка вокруг радио-кнопки:

Анимированные чекбоксы и радио-кнопки на SVG

Классическая галочка для чекбоксов:

Анимированные чекбоксы и радио-кнопки на SVG

Заполнение радио-кнопки:

Анимированные чекбоксы и радио-кнопки на SVG

Текст заполнения в демо сгенерирован при помощи Corporate Ipsum.

Надеемся, вам понравились эти анимации, и они вдохновят вас на собственные проекты.

Посмотреть демо | Скачать исходный код
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: отправные формы
Опубликовал Design FactoRy   Прочитано (раз): 3947   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930