Автор

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

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

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


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

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


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

Meta редирект наихудший из редиректов его используют лишь в случае когда остальные виды редиректа в htaccess и php не доступны, но как говорится: на безрыбье и рак рыба, поэтому лучше сделать такой редирект чем потерять посетителей навсегда. При всем при этом у нас есть возможность, кстати отсутствующая при предыдущих вариантах редиректа сообщить пользователям о том, что сайт переехал на новый домен и это тоже неплохо.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close