Автор

28 10.2015
Слайдер с эффектом параллакса для сайта

Слайдер с эффектом параллакса для сайта


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

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 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)");
});
});

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

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

18 04.2013
Слайдер с эффектом параллакса для сайта

Индикатор прогресса является неотъемлемой частью почти любого сайта. Обычно он используется для отображения состояния загрузки или какого либо другого процесса на сайте. Делаете ли вы веб-приложение или просто сайт, наверняка вам потребуется данный элемент интерфейса. В данном уроке мы сделаем стильный и анимированный индикатор прогресса с помощью правил CSS3. Все выглядит достаточно эффектно и будет радовать взор посетителей во время загрузки. Вот как это будет выглядеть..


16 04.2013
Слайдер с эффектом параллакса для сайта

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


28 11.2014
Слайдер с эффектом параллакса для сайта

Бывают такие ситуации, когда необходимо реализовать достаточно простые эффекты, но из-за упущенных элементарных знаний возникают сложности. Так мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса. Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.


18 01.2017
Слайдер с эффектом параллакса для сайта

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close