Оригинальный фильтр контента

demosourse

Представленный фильтр позволяет пользователям переключаться с одной категории на другую! Само переключение будет сопровождаться разворотом изображений галереи.

На больших сайтах фильтр контента очень важен, ведь каждый фильтр на счету. К примеры вы смотрите “последние продукты” интернет-магазина. Как насчёт идеи отображения “популярных продуктов” без перезагрузки страницы? Идея в том, чтобы скрыть продукты первой категории, с помощью CSS3 3D трансформаций развернуть изображения и при окончании поворота отобразить новую категорию. Данный эффект не будет работать в старых браузерах, как 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> будет использоваться при развороте.

<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 { /* по умолчанию, делаем видимым первый элемент */
	position: relative;
	z-index: 5;
}

Другие элементы списка будут позиционироваться абсолютно: это значит что высота контейнера будет зависеть от первого элемента списка. К тому же, воспользуемся свойством z-index для того чтобы активный элемент точно оказался выше всех.

Так же нам понадобятся два класса: .is-hidden и .is-selected – которые мы зададим другим элементам списка. Класс .is-hidden будет применён ко всем скрытым элементам галереи; .is-selected прикрепим к активному элементу (сделаем это через jQuery).

Так же надо не забыть применить свойство backface-visibility: hidden; ко всем элементам списков!

li.is-hidden { /* скрытые элементы, рядом с передним */
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	transform: rotateY(180deg);
}

li.is-selected { /* выбранный пункт галереи */
  z-index: 3 !important;
}

Обработка событий

Теперь суть идеи: при клике по категории, воспользуемся jQuery для добавления класса .is-switched к элементу <ul> для поворота. Главная цель данного класса одновременно добавить свойства трёх классов:

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:

@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);
  }
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/bouncy-content-filter/
Перевел: Станислав Протасевич
Урок создан: 10 Февраля 2016
Просмотров: 6444
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^