Наверное каждому из веб-разработчиков приходилось сталкиваться с аккордеонами изображений, весьма хитрый ход позволяет стилизовать сайт изображениями, при этом сэкономив уйму места, и привлекая при этом пользователей интересным решением анимации, в данном уроке мы рассмотрим достаточно простой способ реализации аккордеона изображений для сайта с помощью CSS. Такой вариант решения может стать отличным началом приветствия вашего сайта, где пользователю нужно сделать основной выбор.
Идея состоит в том, что у нас есть пять изображений, мы выстраиваем их в ряд, затем добавляем подписи, последним шагом будет подключение увеличения изображений так, чтобы остальные немного изменяли свой размер.
И так, давайте приступим.
Шаг 1. HTMLРазметка будет очень простой, нам необходимо вывести пять классов, каждый из которых отвечает за свое изображение и его позиционирование в пространстве:
<div class='wrapper'>
<div class='item ryze'></div>
<div class='item irelia'></div>
<div class='item jinx'></div>
<div class='item katarina'></div>
<div class='item ziggs'></div>
</div>
Как вы поняли ничего сложного нет, все это мы обвернули в общий класс, который будет группировать и позиционировать наш аккордеон.
Шаг 2. CSSТеперь нам необходимо, для начала, определить общие параметры контейнера, с указанным его позиционированием, затем мы указываем процентное соотношение для каждого блока:
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
.item {
display: flex;
flex-grow: 1;
transition: all .5s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
&:hover {
flex-grow: 4;
box-shadow: inset 0 0 20px #000;
}
&:after {
content: "";
width: 200%;
height: 43.33%;
background-color: rgba(#000, 0.75);
left: -50%;
bottom: -10%;
position: absolute;
transform: rotate(-15deg);
color: #fff;
text-align: center;
padding-top: 20px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Raleway';
font-weight: 100;
}
&.ryze {
background-image: url($ryze);
background-position: 70% center;
&:after {
content: "Ryze";
}
}
&.irelia {
background-image: url($irelia);
background-position: 45% center;
&:after {
content: "Irelia";
}
}
&.jinx {
background-image: url($jinx);
background-position: 70% center;
&:after {
content: "Jinx";
}
}
&.katarina {
background-image: url($katarina);
background-position: 70% center;
&:after {
content: "Katarina";
}
}
&.ziggs {
background-image: url($ziggs);
background-position: 75% center;
&:after {
content: "Ziggs";
}
}
}
}
Так как подписи были убраны из разметки мы перенесли их в стили. Такой простой способ поможет с легкостью внедрить аккордеон в структуру Вашего проекта.
Скачивание файлов доступно только зарегистрированным пользователям