Этот компактный фильтр содержимого позволяет пользователям переключаться из одной категории в другую! Каждый щелчок запускает вращение изображений галереи, показывая элементы, принадлежащие выбранной категории.
Фильтры содержимого особенно полезны для крупных веб-сайтов, где важен каждый пиксель. Допустим, вы показываете «последние продукты» своей электронной коммерции. Как насчет того, чтобы дать пользователям возможность переключаться на «самые популярные» продукты без обновления страницы? Хорошим решением может быть скрытие «самых популярных» элементов сразу за «последними продуктами», а затем использование возможностей CSS3 3D Transforms для поворота элементов, когда пользователь переключается с одного варианта на другой. Эффект отскока необязателен, но идею вы поняли! Ротация не будет работать в старых браузерах, таких как IE9, но работа не будет нарушена - просто включение / выключение отображения без переходов. Давайте погрузимся в код!
Создание структуры
Мы обернули фильтр в элемент <nav>. Структура фильтра - это просто неупорядоченный список. У нас есть 3 варианта, но 4 элемента списка: первый - это заполнитель, который мы будем использовать на мобильных устройствах, чтобы показать выбранный вариант (с помощью jQuery). Заполнитель будет удален (display:none) на больших экранах с помощью медиа-запросов.
Помните, что мы создаем наши ресурсы, начиная с мобильных устройств, поэтому сначала нужно подумать о маленьких экранах.
<nav>
<ul>
<li class="placeholder">
<a href="#0">Option 1</a> <!-- default option on mobile -->
</li>
<li>
<a href="#0">Option 1</a>
</li>
<li>
<a href="#0">Option 2</a>
</li>
<li>
<a href="#0">Option 3</a>
</li>
</ul>
</nav>
Для галереи мы создали неупорядоченный список, вложенный в другой неупорядоченный список. Второй элемент <ul> будет вращаться, и 3 изображения внутри будут вращаться вместе с ним.
<ul>
<li>
<ul> <!-- this is the element that will rotate -->
<li>
<img src="img/thumb-1.jpg" alt="thumbnail">
</li>
<li>
<img src="img/thumb-2.jpg" alt="thumbnail">
</li>
<li>
<img src="img/thumb-3.jpg" alt="thumbnail">
</li>
</ul>
</li>
<li>
<ul> <!-- this is the element that will rotate -->
<li>
<img src="img/thumb-1.jpg" alt="thumbnail">
</li>
<li>
<img src="img/thumb-2.jpg" alt="thumbnail">
</li>
<li>
<img src="img/thumb-3.jpg" alt="thumbnail">
</li>
</ul>
</li>
<!-- ... -->
</ul>
Добавление стиля
Первый элемент списка, следовательно, изображение, которое он содержит, является видимым. Мы даем ему класс .is-visible:
li.is-visible { /* the front item, visible by default */
position: relative;
z-index: 5;
}
Имейте в виду, что другие элементы списка - того же неупорядоченного списка - будут иметь абсолютную позицию: это означает, что высота неупорядоченного списка будет зависеть от этого первого элемента списка. Кроме того, задав ему более высокий z-index, мы гарантируем, что он находится на вершине.
Остальные 2 класса, которые нам нужны, - это .is-hidden и .is-selected, которые мы передаем другим элементам списка. Класс .is-hidden применяется ко всем скрытым элементам списка, а .is-selected применяется только к элементу, категория которого была выбрана (мы делаем это в jQuery).
Обратите внимание
Применяя преобразование CSS3 (поворот на 180 градусов), мы гарантируем, что после поворота элемента <ul> на 180 градусов мы увидим переднюю часть элемента списка, который был скрыт, а не его заднюю часть.
Да, и не забудьте добавить backface-visibility: hidden; ко всем пунктам списка!
li.is-hidden { /* the hidden items, right behind the front one */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
transform: rotateY(180deg);
}
li.is-selected { /* the next item that will be visible */
z-index: 3 !important;
}
Обработка событий
Вот идея: когда пользователь щелкает, чтобы изменить параметр, мы используем jQuery для добавления класса .is-Switched к вращающемуся элементу <ul>. Цель этого класса - позволить нам одновременно изменять свойства наших 3 классов:
ul.is-switched li.is-visible {
transform: rotateY(180deg);
animation: cd-rotate 0.5s;
}
ul.is-switched li.is-hidden {
transform: rotateY(0);
animation: cd-rotate-inverse 0.5s;
opacity: 0;
}
ul.is-switched li.is-selected {
opacity: 1;
}
Мы использовали анимацию CSS3 для достижения эффекта отскока, но переходы CSS3 работали нормально:
@keyframes cd-rotate {
0% {
transform: perspective(800px) rotateY(0);
}
70% { /* this creates the bounce effect */
transform: perspective(800px) rotateY(200deg);
}
100% {
transform: perspective(800px) rotateY(180deg);
}
}
@keyframes cd-rotate-inverse {
0% {
transform: perspective(800px) rotateY(-180deg);
}
70% {
transform: perspective(800px) rotateY(20deg);
}
100% {
transform: perspective(800px) rotateY(0);
}
}
Теперь некоторые из вас могут задаться вопросом: почему он не применил вращение непосредственно к элементу <ul>? Потому что для этого потребовалось бы применить transform-style: preserve-3d; к элементу <ul> (чтобы разрешить вложение трехмерных преобразований, потому что элементы списка тоже вращаются). Все было бы намного проще, но, к сожалению, IE не поддерживает preserve-3d (до 11). Вот почему вместо этого я применил преобразования к каждому элементу списка.
Надеюсь, вам понравилось!
Ссылка на автора - twitter.com/romano_cla !
