Параллакс достаточно привлекательная технология для веб-разработчиков, которая поможет привлечь внимание посетителя. В данном уроке мы рассмотрим процесс создания такого замечательного полноэкранного слайдера с эффектом параллакса и возможностью быстрой навигации. По умолчанию у нас будет четыре слайда с нижней навигацией в виде точек, при наведении и перелистывании которых будет происходить плавная анимация, кроме этого будет слайдер оснащен боковыми кнопками, при наведении на края слайдера будут темнеть.
Это будет уведомлять посетителя о возможной дополнительной навигации. При этом градиент затемнения будет прозрачным, что не перекрывает информацию на слайдере. Когда пользователь будет переходить между слайдами будет происходить замечательный эффект параллакса.
Шаг 1. HTML
По умолчанию все слайды кроме активного у нас будут скрыты, при этом мы добавляем обвертку для всего слайда с классом .slide, это позволит нам задать общие параметры, также мы добавили slider-control left inactive который нам необходим для навигации, а также slider-control right, которые обозначают направление при навигации и устанавливают соответствующие параметры:
<div class="slide slide-0 active">
<div class="slide__bg"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Заголовок</h2>
<a class="slide__text-link">Читать далее</a>
</div>
</div>
</div>Каждый По умолчанию мы отобразили один активный слайд, за аналогичной конструкцией мы создаем и три следующих, при этом изменяется вариация активного класса.
Шаг 2. CSS
Теперь нам необходимо установить несколько параметром для нашего слайдера, обратите внимание, что мы будет организовывать построение в виде наложения слоев, при анимации слайда, у нас будет отображаться подсказка с описанием для выбранного слайда, с возможностью дальнейшего прочтения:
svg {
display: block;
overflow: visible;
}
.slider-container {
position: relative;
height: 100%;
user-select: none;
cursor: all-scroll;
}
.slider-control {
z-index: 2;
position: absolute;
top: 0;
width: 12%;
height: 100%;
transition: opacity 0.3s;
will-change: opacity;
opacity: 0;
&.inactive:hover {
cursor: auto;
}
&:not(.inactive):hover {
opacity: 1;
cursor: pointer;
}
&.left {
left: 0;
background: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 100%);
}
&.right {
right: 0;
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%);
}
}
.slider-pagi {
position: absolute;
z-index: 3;
left: 50%;
bottom: 2rem;
transform: translateX(-50%);
font-size: 0;
list-style-type: none;
&__elem {
position: relative;
display: inline-block;
vertical-align: top;
width: 2rem;
height: 2rem;
margin: 0 0.5rem;
border-radius: 50%;
border: 2px solid #fff;
cursor: pointer;
&:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 1.2rem;
height: 1.2rem;
background: #fff;
border-radius: 50%;
transition: transform 0.3s;
transform: translate(-50%, -50%) scale(0);
}
&.active:before,
&:hover:before {
transform: translate(-50%, -50%) scale(1);
}
}
}
.slider {
z-index: 1;
position: relative;
height: 100%;
&.animating {
transition: transform 0.5s;
will-change: transform;
.slide__bg {
transition: transform 0.5s;
will-change: transform;
}
}
}
.slide {
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
&.active {
.slide__overlay,
.slide__text{
opacity: 1;
transform: translateX(0);
}
}Шаг 3. JS
Теперь нам необходимо оживить нашу навигацию, а также переход в автоматическом режиме, для этого мы использовали несколько строчек кода js:
autoSlide();
function changeSlides(instant) {
if (!instant) {
animating = true;
manageControls();
$slider.addClass("animating");
$slider.css("top");
$(".slide").removeClass("active");
$(".slide-"+curSlide).addClass("active");
setTimeout(function() {
$slider.removeClass("animating");
animating = false;
}, animTime);
}
window.clearTimeout(autoSlideTimeout);
$(".slider-pagi__elem").removeClass("active");
$(".slider-pagi__elem-"+curSlide).addClass("active");
$slider.css("transform", "translate3d("+ -curSlide*100 +"%,0,0)");
$slideBGs.css("transform", "translate3d("+ curSlide*50 +"%,0,0)");
diff = 0;
autoSlide();
}
function navigateLeft() {
if (animating) return;
if (curSlide > 0) curSlide--;
changeSlides();
}
function navigateRight() {
if (animating) return;
if (curSlide < numOfSlides) curSlide++;
changeSlides();
}
$(document).on("mousedown touchstart", ".slider", function(e) {
if (animating) return;
window.clearTimeout(autoSlideTimeout);
var startX = e.pageX || e.originalEvent.touches[0].pageX,
winW = $(window).width();
diff = 0;
$(document).on("mousemove touchmove", function(e) {
var x = e.pageX || e.originalEvent.touches[0].pageX;
diff = (startX - x) / winW * 70;
if ((!curSlide && diff < 0) || (curSlide === numOfSlides && diff > 0)) diff /= 2;
$slider.css("transform", "translate3d("+ (-curSlide*100 - diff) +"%,0,0)");
$slideBGs.css("transform", "translate3d("+ (curSlide*50 + diff/2) +"%,0,0)");
});
});В результате мы получили достаточно привлекательный, автоматический слайдер, который предоставляет нам три варианта навигации, а также замечательный эффект, который оживит ваш ресурс.
