Иконификация контента

В этой статье мы поговорим о концепции иконификации – размещения контента на странице и применении CSS для его трансформирования в упрощенное превью в виде значка. Давайте рассмотрим на примере. В этом демо показана иконификация на примере календаря. Чтобы развернуть месяц, нужно нажать на его значок.

Визуальная абстракция

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

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

HTML

Здесь никаких сюрпризов. Календари – это на самом деле просто дни, оформленные в формате таблицы, поэтому table здесь является очевидным семантическим вариантом. Каждый месяц завернут в article, подразумевая, что он является полноценной частью контента. Каждый article включает tabindex=«0», чтобы включить возможность табуляции, что очень важно при работе с клавиатуры (об этом поговорим чуть позже).

CSS

Здесь очень много CSS, поэтому я расскажу только об основном. Полный CSS доступен в источнике и включает комментарии по некоторым исправлениям для определенных браузеров.

Каждый article центрируется внутри li, который размещен внутри ul. Используемая мной техника центрирования в article позволяет накладываться на окружающий контент и оставаться по центру при разворачивании до полного размера. Соответствующие описания приведены ниже.

article {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.25);
    
    /* и так далее... */
}

Обратите внимание, что свойство transform также включает scale(.25). Это не для центрирования, а скорее для создания размера ¼ значка.

Восстановление article до полного размера выполняется за счет добавления класса active в родительский элемент, что приводит к изменению свойства transform в article.

transform: translate(-50%, -50%) scale(1);

Свойство scale(1) говорит само за себя, но все равно стоит отметить, что translate(-50%, -50%) необходимо заявить, иначе сползет в свое нецентрированное положение.

В то же время в родственные элементы добавляется класс inactive, таким образом, что еще один невозможно развернуть, пока активный article не будет свернут. Это выполняется за счет блокирования событий курсора.

.inactive {
    pointer-events: none;
}

Наложение z-index требует некоторой точности. Активный должен появляться поверх соседнего контента. Это означает увеличение z-index при запуске анимации развертывания (простая часть) и запрет сбрасывания z-index, пока не завершится анимация сжатия (сложная часть). К счастью, z-index можно анимировать, поэтому для этого мы можем использовать transition-delay.

li {
    position: relative;
    z-index: 1;
    transition: z-index;
    transition-delay: .4s; /* задержка при переходе от полного размера к значку */
 
    /* ... */
}
 
.active {
    z-index: 2;
    transition-delay: 0s; /* отсутствие задержки при переходе от значка к полному размеру */
}

Класс active также вызывает изменения свойства opacity в различных дочерних элементах, что дает нам отличный эффект усиления/затухания деталей.

Конечно, ни один из этих элементов невозможно анимировать без описания transition в article (для масштабирования) по различным дочерним элементам (для затухания).

Пиксельное совершенство

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

Все пиксельные размеры в CSS умножены на 4. И это не случайность. Контент масштабируется до ¼ размера при отображении в виде значка, поэтому умножение на 4 обеспечивает, что не возникнут дробные пиксельные размеры. Благодаря этому, пиксели идеально выравниваются, и получаются ровные края.

Еще может помочь определение ширины и высоты элементов. Это не только позволяет проще добиться ранее описанного выравнивания пикселей, но также может помочь избежать смещения после анимации. Браузеры постоянно перенастраивают текст по завершении анимации. Если элемент, содержащий такой текст, не имеет установленной ширины/высоты, тогда его размер изменится соответствующим образом, что приведет к цепной реакции смещения положения элементов, расположенных после него.

Производительность

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

Есть две вещи, которых следует избегать: перекраска и пересчет положения. Перекраска возникает ввиду свойств анимации, которые заставляют браузер изменять цвет элементов. Это включает color,background, box-shadow и прочее. Пересчет положения возникает в результате свойств анимации, которые заставляют браузер обновлять выкладку элементов. Это включает width, height, margin,top, left и прочее.

Перекраска и пересчет – это не конец света, но они могут снизить производительность. Вы можете избежать таких эффектов с помощью двух свойств, которые довольно эффективны при анимации, так как им помогает графический процессор: opacity и transform (когда они используются для положения, вращения или масштабирования).

Это объясняет некоторые решения, используемые в CSS. Есть места, в которых анимация элементов color или background-color будет более интуитивной, но использование подхода с opacity обеспечивает лучшую производительность.

JavaScript и доступность

JavaScript используется для управления поведением разворачивания и сжатия контента. Клики мышкой являются очевидным тригером, но доступность с клавиатуры также является важным моментом, поэтому JavaScript это также учитывает. Для удобства используется jQuery.

function activate(e) {
    var $wrapper = $(e.currentTarget).parent();
    $wrapper
        .addClass('active')
        .siblings().addClass('inactive');
}
 
function dismiss(e) {
    var $wrapper = $(e.currentTarget).closest('li');
    $wrapper
        .removeClass('active')
        .siblings().removeClass('inactive');
    e.stopPropagation();
}
 
function checkKey(e) {
    var $wrapper = $(e.currentTarget).parent();
    var isActive = $wrapper.hasClass('active');
    if (isActive && (e.keyCode === 13 || e.keyCode === 27)) {
        // активно, нажать ввод для выхода
        dismiss(e);
    } else if (!isActive && e.keyCode === 13) {
        // неактивно, нажать ввод
        activate(e);
    }
}
 
$('article').on({
    'click': activate,
    'blur': dismiss,
    'keyup': checkKey
});
$('.dismiss').on('click', dismiss);

Нажатие на article вызывает свойство activate(), которое применяет класс active к соответствующему элементу и класс inactive для остальных элементов.

Нажатие на значок выхода или нажатие на табуляцию/клик за пределами article вызывает свойство dismiss(), которое просто удаляет классы active и inactive.

Свойство checkKey() обеспечивает поддержку нажатия определенных клавиш. Нажатие на enter переключает текущий article. Нажатие на escape отключает текущий article, если он развернут.

Это описывает мой первый пример. Можете посмотреть готовое демо, если вы еще его не видели.

Второе демо

Следующей будет концепция иконификации карточек профиля. Демо.

Здесь используется большинство техник, описанных в первом демо. Но тут есть новый интересный момент – превращение отдельных слов в тексте профиля в абстрактные блоки. Первый этап осуществления этого – заворачивание каждого слова в собственный тег span, в результате чего у нас появляется то, над чем можно работать. Делать это вручную было бы действительно сложно, поэтому пусть за нас это сделает JavaScript.

$('.about p').each(function() {
    var $this = $(this);
    var words = $this.text().trim().split(' ');
    var spans = '<span>' + words.join('</span> <span>') + '</span>';
    $this.html(spans);
});

Этот сниппет просто собирает текст в теги p, разбивает его везде, где находит пробелы, потом заворачивает каждый кусок в теги span. Теперь мы можем использовать эти теги span, чтобы подключить CSS.

.about span {
    position: relative;
    overflow: hidden;
}
 
.about span::after {
    content: '';
    opacity: 1;
    display: block;
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom, #fff 25%, #c7c5bf 25%, #c7c5bf 75%, #fff 75%);
    transition: opacity .4s;
}

Сам по себе тег span в основном опускается. Вместо ::after используется псевдо-элемент, покрывающий каждое слово блоком цвета. Свойствам top и bottom задаются слегка негативные значения, чтобы растянуть блок, чтобы он покрывал слова, которые возвышаются или свисают (например, “g”).

К сожалению, это делает блоки толще, что визуально выглядит не очень привлекательно. Решение – использовать аккуратный линейный градиент, который перекрывает верх и низ белым цветом (чтобы соответствовать фону). Блоки становятся тоньше, текст все еще покрывается, все счастливы.

При этом будьте осторожны, эту технику с элементами span следует использовать под присмотром. Очень легко увлечься и разнести дерево DOM за счет слишком большого количества элементов span, каждый из которых будет анимироваться, что может привести к проблемам с производительностью. Лучше всего для этого использовать небольшие кусочки текста, как в примере.

Третье демо

В последнем демо показана иконификация в контексте аналитической панели.

В этом демо происходит много чего, но на самом деле в нем нет никаких новых техник иконификации контента, поэтому на этом я остановлюсь. Если вам интересны подробности, все есть в источнике.