Техно-мир

Сегодня мы хотим поделиться с вами забавными анимациями для чекбоксов и радио-кнопок. Суть заключается в том, чтобы анимировать SVG для создания привлекательных визуальных эффектов для выделения чекбоксов или элементов радио-ввода. Анимированная графика предлагает множество возможностей, включая заполнение поля крестиком, галочкой, точкой и так далее. Мы используем технику анимирования SVG-путей от Jake Archibald, и вы можете узнать, как работает этот метод в его статье “Animated line drawing in SVG”.Пожалуйста учтите, что это всего лишь попытка доказать жизнеспособность данного концепта, а не полноценное решение. Анимация SVG-путей может работать не во всех браузерах, особенно если речь идет о мобильных браузерах.Для кастомного чекбокса или радио-кнопки мы используем псевдо-элемент ярлыка ::before и скрываем элемент ввода, устанавливая opacity на 0. Он на самом деле находится здесь, поверх псевдо-элемента, так что мы можем просто кликнуть по нему и получить стандартное поведение элемента выделения. Мы также можем сделать ярлык кликабельным, установив значение атрибута в ID элемента ввода.Изначально мы при помощи javascript также добавляем необходимые SVG-элементы после элементов ввода. Их не будет видно, так как их пути пустые. Как только мы выделяем элемент ввода, мы анимируем пути посредством соответствующего перехода.

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

How do you collaboratively administrate empowered markets via plug-and-play networks?

• Efficiently unleash information
• Quickly maximize timely deliverables
• Dramatically maintain solutions
• Completely synergize relationships
• Professionally cultivate customer service

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

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

.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.

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

Исходники в архиве.