Автор

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

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


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

 

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

 

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

 

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

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Ранее я уже писал о подобном скрипте Highlight.js в статье «Подсветка синтаксиса в примерах кода» который я использую на своем сайте, в этой статье речь пойдет о подсветке синтаксиса кода на SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие. В рамках данной статьи мы подробно рассмотрим процесс установки SyntaxHighlighter на сайт, а затем перейдем к подробной инструкции по использованию скрипта.


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

Вторичная панель содержимого, которая складывается плотно, поддерживается CSS-преобразованиями и jQuery.


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

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


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

Сделаем необычные кнопки с использованием только одного тега ссылки, и конечно же благодаря CSS3.

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close