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

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

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

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


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


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


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

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

Посмотреть демо | Скачать исходный код