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"); }); |
В результате такой замечательный слайдер с эффектом параллакса у нас получился.
