Гибкие слайды с эффектом параллакса на CSS3

Создано автором 01.04.2020 в CSS

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

Скачать

Смотреть Демо 

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="option active" style="background-image:url(img/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
    <div class="shadow"></div>
    <div class="label">
        <div class="icon">
            <i class="fas fa-walking"></i>
        </div>
        <div class="info">
            <div class="main">Путешествия</div>
            <div class="sub">Путешествуйте вместе с друзьями</div>
        </div>
    </div>
</div>

Всего у нас будет шесть схожих контейнеров, давайте перейдем к следующему шагу.

Шаг 2. CSS

Теперь перейдем к самому главному, ведь основная работа у нас будет возлагаться именно на css, для начала определяем общие параметры:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
}
 
body .credit {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #000;
}
 
body .options {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    min-width: 600px;
    max-width: 900px;
    width: calc(100% - 100px);
    height: 400px;
}

Затем добавляем подписи и скругляем края, также добавим немного теней:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
body .options .option.active .label {
    bottom: 20px;
    left: 20px;
}
 
body .options .option.active .label .info > div {
    left: 0px;
    opacity: 1;
}
 
body .options .option:not(.active) {
    flex-grow: 1;
    border-radius: 30px;
}
 
body .options .option:not(.active) .shadow {
    bottom: -40px;
    box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
 
body .options .option:not(.active) .label {
    bottom: 10px;
    left: 10px;
}
 
body .options .option:not(.active) .label .info > div {
    left: 20px;
    opacity: 0;
}
 
body .options .option .shadow {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 120px;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
body .options .option .label {
    display: flex;
    position: absolute;
    right: 0px;
    height: 40px;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
 
body .options .option .label .icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: white;
    color: var(--defaultBackground);
}
 
body .options .option .label .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    color: white;
    white-space: pre;
}
 
body .options .option .label .info > div {
    position: relative;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
 
body .options .option .label .info .main {
    font-weight: bold;
    font-size: 1.2rem;
}
 
body .options .option .label .info .sub {
    transition-delay: .1s;
}

Шаг 3. JS

Нам нужно будет добавить немного магии, а именно активировать функцию нажатия на блоки и их активации, поможет нам в этом немного кода js:

1
2
3
4
$(".option").click(function() {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

В результате такой замечательный слайдер с эффектом параллакса у нас получился.

Вам также может понравиться

Leading-Trim: будущее цифрового набора текста

Центрирование в CSS: полное руководство