Создание анимационного листинга элементов на CSS3

      CSS

Здравствуйте, уважаемые читатели XoZbloga! После двух недель молчания, я снова в деле. Итак, сегодня я хотел бы показать Вам как с помощью только CSS3, можно сделать анимационный листинг элементов (элементов списка ul) с возможностью выбрать в каком виде будет находиться список. Чтобы пользователю было удобнее выбирать вид списка, возможные варианты предоставлены картинками. По нажатию на каждую кнопку, элементы преобразуется в определенный стиль расположения данных. Да что об этом говорить, лучше один раз увидеть.

Результат

В результате будет четыре возможных представления списка:

  • изображения с текстом в три колонки;
  • только текст;
  • изображение с текстом в одной колонке;
  • только изображение.

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

Анимационный листинг элементов на CSS3

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

Разметка HTML

Мы будем использовать неупорядоченный список для отображения элементов. Но начнем с переключателя. Разметка выглядит так:

<input type="radio" name="view-control" class="view-control-1" checked="checked" />
<span class="control first"><img src="images/blockinline.png" /></span>
         
<input type="radio" name="view-control" class="view-control-2" />
<span class="control"><img src="images/plainlist.png" /></span>

<input type="radio" name="view-control" class="view-control-3" />
<span class="control"><img src="images/blocklist.png" /></span>
         
<input type="radio" name="view-control" class="view-control-4" />
<span class="control last"><img src="images/block.png" /></span>

Теперь непосредственно сам список с элементами, полностью копировать всю разметку не буду. Приведу лишь пару элементов для наглядности:

<ul id="item-list">
   <li>
      <img src="images/angrybird.png" />
      <p><span class="title">Angry Birds Space Premium</span><span class="developer">Rovio Mobile Ltd.</span></p>
   </li>
   <li>
      <img src="images/omgpop.png" />
      <p><span class="title">Draw Something</span><span class="developer">OMGPOP</span></p>
   </li>
  <!-- и так далее -->
</ul>

Стили CSS

Начнем также с описания стилей кнопок переключателей.

input[type=radio] {
   position: absolute;
   z-index: 100;
   opacity: 0;
   cursor: pointer;
   height: 110px;
   width: 40px;
   margin-top: -7em;
}

.control {
   display: inline-block;
   margin: 0 -.13em;
   width: 40px;
   background: #eddfc7;
   padding: 5px 3px 1px 2px;
   border-right: 1px solid #e0cba0;
   cursor: pointer;
   vertical-align: bottom;
}

С помощью CSS селектора выбираем все поля input с типом radio, таких у нас 4 — это как раз переключатели. Как уже говорилось выше они будут скрыты от глаз, свойство opacity значение 0. И самое важное высота этого элемента достаточно большая 110px, а также абсолютное позиционирование.

Изображение переключателя, точнее элемент span с классом .control, который его окружает. Делаем встроенным блоком, который обтекается другими в нашем случае радио-кнопкой — свойство display со значением inline-block. Таким образом изображение переключателя накладывается на поле radio.

В итоге переключатель представлений списка получился вот таким:

Переключатель

Ну и последнее, что касается переключателя. Это действие при наведении курсора мыши. Выбранный элемент выделяется внутренней тенью. Выбираем нужный элемент с помощью псевдокласса :hover — при наведении, и :checked — активный переключатель.

.control:hover,
   input[type=radio]:hover + .control,
   input[type=radio]:checked + .control {
   box-shadow: inset 0px 0px 20px #d3b67a;
}

Переходим к стилям списка, который имеет идентификатор item-list. Ключевым здесь является отключение маркеров в списке — свойство list-style-type со значением none.

#item-list {
   margin-top: 2em;
   padding: 0;
   list-style-type: none;
   text-align: left;
}

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

      #item-list li {
         display: inline-block;
         width: 300px;
         vertical-align: top;
         margin: 0 0.5em 1em 0;
         padding: 10px;
         background: #f3eada;
         border-radius: 5px;
         box-shadow: inset 0px 0px 20px #e0cba0;
         overflow: hidden;
      }
         
      #item-list li img {
         display: inline-block;
         vertical-align: top;
         width: 100px;
         margin-right: .5em;
      }
         
      #item-list li p {
         display: inline-block;
         width: 180px;
         margin: 0;
         padding: 0;
      }

В принципе все свойства понятны, остановлюсь лишь на главных. Сам элемент списка имеет ширину в 300 пикселей, является встроенным блочным элементом — inline-block. отображается только область внутри элемента списка, остальное скрыто — overflow: hidden. Элемент с закругленными углами — border-radius:5px и внутренней тенью — box-shadow: inset ….

Изображение и текст также встроенные блочные элементы, с фиксированной шириной.

Анимация

Собственно самый ответственный момент. Это описание действий при нажатии на радио кнопку. Следующие 4 способа представления списка похожи, манипулировать мы будем лишь шириной элементов и свойством видимости (включать и выключать видимость). Сам эффект анимации основан на свойстве CSS3 transition, которое я более подробно рассматривал в одном из предыдущих уроков — CSS слайдер изображений с эскизами.

Итак, первый вариант списка — изображение с текстом в три колонки:

.view-control-1:checked ~ #item-list li img {
   opacity: 1;
   width: 100px;
   visibility: visible;
   transition: .4s .4s ease-out;
}
   
.view-control-1:checked ~ #item-list li p {
   opacity: 1;
   visibility: visible;
   transition: .4s ease-out;
}
   
.view-control-1:checked ~ #item-list li {
   width: 300px;
   transition: .4s ease-out;
}

Работает это так. Нажимаем к примеру на первую радио кнопку (view-control-1) и она становится активной, теперь благодаря CSS селектору отслеживаем, какая из четырех кнопок выбрана (view-control-1:checked) и выбираем все элементы в списке (~ #item-list li), присваивая при этом каждому элементу новые свойства.

Сначала делаем изображения в каждом элементе списка видимыми visibility:visible и не прозрачным opacity:1, задаем ширину в 100 пикселей и все это происходит плавно в течении 4х десятых секунды благодаря свойству transition. Эффект длится в течении 4х десятых секунды с такой же задержкой, функция анимации ease-out.

Далее подобным образом присваиваем свойства для текста и элемента списка в целом, задавая ему ширину в 300 пикселей.

Второй вариант списка — только текст:

.view-control-2:checked ~ #item-list li img {
   opacity: 0;
   width: 0;
   visibility: hidden;
   transition: .4s ease-out;
}
   
.view-control-2:checked ~ #item-list li p {
   opacity: 1;
   visibility: visible;
   transition: .4s ease-out;
}
   
.view-control-2:checked ~ #item-list li {
   width: 900px;
   transition: .4s .4s ease-out;
}

Здесь все аналогично как и в предыдущем варианте. Единственное, что изображение скрывается — visibility:hidden, и элемент списка растягиваем на всю ширину списка width:900px.

Третий вариант списка — изображение и текст в одну колонку:

.view-control-3:checked ~ #item-list li img {
   opacity: 1;
   width: 100;
   visibility: visible;
   transition: .4s ease-out;
}
   
.view-control-3:checked ~ #item-list li p {
   opacity: 1;
   visibility: visible;
   transition: .4s ease-out;
}
   
.view-control-3:checked ~ #item-list li {
   width: 900px;
   transition: .4s ease-out;
}

Снова возвращаем изображение, ширина остается прежней — 900px. Таким образом список строится в одну колонку с текстом и картинкой.

Четвертый, последний вариант отображения списка — только картинка:

.view-control-4:checked ~ #item-list li img {
   opacity: 1;
   width: 100;
   visibility: visible;
   transition: .4s ease-out;
}  
   
.view-control-4:checked ~ #item-list li p {
   opacity: 0;
   position: absolute;
   visibility: hidden;
   transition: .4s ease-out;
}
   
.view-control-4:checked ~ #item-list li {
   width: 100px;
   transition: .4s ease-out;
}

В данном варианте скрываем текст, остается лишь изображение. А элемент списка принимает ширину в 100px.

На этом все. Вот таким образом на сайте можно организовать листинг элементов списка.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или Facebook. Если урок Вам понравился и пригодился сделайте tweet или like — поделитесь с друзьями :)

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!