Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Параллакс эффект. Простой пример параллакс слайдера

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

Параллакс эффект. Простой пример параллакс слайдера
Содержание статьи

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

Несколько слов о параллакс эффекте

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

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

Хорошо, а как теперь применить это в сайтостроении и как связана статуя со слайдером, спросите вы. И вопрос будет совершенно уместен. Этот пример мы рассмотрели лишь для того, чтобы внести некоторую ясность в понятие параллакса. А теперь давайте представим, что вместо звездного неба бы имеем какую-нибудь красивую картинку, которая является фоновым изображением блочного элемента. А теперь давайте поместим в середину этого блочного элемента какой-нибудь текст и напишем его крупным шрифтом, а цвет установим ему такой, при котором он контрастно будет смотреться на фоне нашего с вами произвольного изображения.

В случае, если мы прокрутим страницу вниз при помощи колесика мышки, наш блочный элемент переместится наверх относительно начального положения, а вместе с ним переместится и вставленный в него текст с фоном. Да, все верно, именно так и должно происходить. Но когда речь идет о параллакс эффекте, то реакция блочного элемента на прокрутку страницы должна несколько отличаться. Текст должен быть жестко привязан к середине блока и перемещаться одновременно с ним без каких-либо изменений, в то время как вертикальная позиция фона блока должна меняться в том же направлении и пропорционально расстоянию, на которое была прокручена страница. Другими словами, чтобы было понятней - если $(window).scrollTop() - это расстояние на которое прокручена страница, то background-position-y - это позиция фона относительно блока, в котором он находится. Опустили страницу вниз на 100px, фон в блоке опустился на 50px. Пропорционально, но деленный на определенный коэффициент, допустим на 2, как в данном примере.

Скрипт параллакс слайдера

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

Сначала, как всегда, разметка и стили. CSS выглядит так:

.alexboyko-parallax-slider {
	height: 600px;
	color: #fff;
	overflow: hidden;
	text-shadow: 0 0 1px #000;
}
.alexboyko-parallax-slider .track {

}
.alexboyko-parallax-slider .slide {
	height: 600px;
	background-position: 50% -200px;
	background-repeat: no-repeat;
	box-shadow: inset 0 0 30px 0 #000;
}
.alexboyko-parallax-slider .title, .alexboyko-parallax-slider .sub-title {
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 80px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	opacity: 0.9;
}
.alexboyko-parallax-slider .title {
	padding: 120px 0 0 0;
}
.alexboyko-parallax-slider .sub-title {
	margin: 30px 0;
	font-size: 50px;
	font-weight: 400;
}
.alexboyko-parallax-slider p {
	line-height: 1.6em;
	padding: 0 150px;
}
.alexboyko-parallax-slider .cool-button {
	text-shadow: none;
}

Разметка будет выглядеть примерно так:

<div class="alexboyko-parallax-slider center">
	<div class="track">

		<div class="slide" style="background-image: url(/slides/slide-01.jpg);">
			<div class="wrapper">
				<div class="title">Заголовок</div>
				<div class="sub-title">подзаголовок</div>
				<p>Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.</p>
				<a href="/go/" class="cool-button">Классная кнопка</a>
			</div>
		</div>
		<div class="slide" style="background-image: url(/slides/slide-02.jpg);">
			<div class="wrapper">
				<div class="title">Заголовок</div>
				<div class="sub-title">подзаголовок</div>
				<p>Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.</p>
				<a href="/go/" class="cool-button">Классная кнопка</a>
			</div>
		</div>
		<div class="slide" style="background-image: url(/slides/slide-03.jpg);">
			<div class="wrapper">
				<div class="title">Заголовок</div>
				<div class="sub-title">подзаголовок</div>
				<p>Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.</p>
				<a href="/go/" class="cool-button">Классная кнопка</a>
			</div>
		</div>
		
	</div>
</div>

Ну а вот собственно и сам скрипт слайдера с параллакс эффектом, как и обещали:

$(document).ready(function() {
	$(window).scroll(function() {
		if(screen.width > 640) {
			var st = $(window).scrollTop();
			var n = -200 + Math.round(st / 2);
			$(".alexboyko-parallax-slider .slide").css({ backgroundPosition : '50% ' + n + 'px' });
		}
	});
	
	if($(".alexboyko-parallax-slider .slide").length > 1) {
		setTimeout("abParallaxSlider(1)", 10000);
	}
});

function abParallaxSlider(index) {
	var c = $(".alexboyko-parallax-slider .slide").length;
	var mt = index * -600;
	$(".alexboyko-parallax-slider .track").animate({ marginTop : mt + 'px' }, 500);
	++index;
	if(index == c) {
		index = 0;
	}
	setTimeout("abParallaxSlider(" + index + ")", 10000);
}

Все предельно просто. Благодаря старому доброму setTimeout мы циклично меняем слайды один за одним с задержкой в 10 секунд и делаем это только в случае если в треке у нас более одного слайда.
А благодаря $(window).scroll(function(){}); мы меняем позицию фона в слайдере относительно его собственного контейнера по оси y, деля на произвольный коэффициент и округляя. Положение фона по оси x мы разумеется не трогаем, оно должно оставаться неизменным, хотя, если бы делать сайты, в которых есть горизонтальная полоса прокрутки не считалось бы моветоном, то скрипт можно было бы доработать и до горизонтального параллакс эффекта в случае прокрутки по оси x, но, мы не делаем сайты, на которых есть горизонтальная полоса прокрутки, потому что как и многие другие разработчики, считаем это совершенно неприемлемым.

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

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



Предыдущая статья:
Самый простой слайдер контента на jQuery

Читайте также:
Мигающий заголовок (title) в браузере на JavaScript

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»