Сайт в стиле Параллакс Скроллинг (Parallax Scrolling)

/ 👁 6192

Все чаще в сети можно увидеть сайты с так называемым эффектом Parallax Scrolling. Многим этот эффект очень нравится. И действительно, для некоторых типов сайтов он создает очень выгодный вид. Сегодняшний урок о том, как сделать сайт в стиле Параллакс Скроллинг.

дополнительные материалы к урокам

демо версия урока

Здравствуйте, дорогие друзья! Очень давно я не писала статьи и уроки на блог. Дело в том, что у меня в декабре прошлого года родилась дочка, и я просто «выпала» на несколько месяцев из ритма привычной жизни.

Но постепенно все встает на свои места, привыкаешь к новым заботам и начинаешь находить время на все остальное. Вот руки добрались и до блога!

Итак, сегодня будем разбирать пример создания сайта в стиле Parallax Scrolling.

Скажу сразу: здесь нам потребуется помощь библиотеки jQuery, так что из исходников можете сразу себе скачивать папочку «scripts». А пример того, что у нас получится можете посмотреть, щелкнув по иконке «Демо».

Конечно, при разработке полноценного сайта, Вы, скорее всего, разместите на странице больше разнообразного контента. Но здесь я показываю лишь принцип создания страниц с Parallax Scrolling.

Для фонов страниц я выбрала 3 изображения большого размера. Опять же, фон – остается на Ваше усмотрение. Это может быть, как полноценная большая картинка, так и маленький кусочек, который будет повторяться по x и y. Эти настройки, я думаю, Вы сможете подрегулировать под себя в файле таблицы стилей.

Давайте начнем!

Создаем сайт с эффектом Parallax Scrolling

сайт в стиле Parallax Scrolling

1. Первым делом давайте создадим несколько папок.

Папка «images» будет содержать те картинки, которые Вы выберите для фона. Сразу скажу, что если это будет цельная картинка, то она должна быть большого размера. У меня они 1900 х 1000. А также в этой папке нам понадобится картинка для навигации. У меня это картинка белого кружочка, которая называется «spot.png».

В папку «scripts» нужно будет скачать все те файлы, которые Вы найдете в одноименной папке исходников к уроку.

С папками разобрались.

2. Теперь создаем html-файл, в котором сделаем следующую разметку.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parallax Scrolling</title>
</head>
<body>
<ul id="nav">
	<li><a href="#one" title="Next Section"><img src="images/spot.png" alt="Link" /></a></li>
    <li><a href="#two" title="Next Section"><img src="images/spot.png" alt="Link" /></a></li>
    <li><a href="#three" title="Next Section"><img src="images/spot.png" alt="Link" /></a></li>
</ul>

<div id="header">
	<div class="content">
        <h1>Parallax Scrolling</h1>
    </div> 
</div> 
<div id="one">
	<div class="content">
    	<div class="left">
		<h2>Content number 1</h2>
        <p>Это первая страница нашего Parallax Scrolling. Заполним контент заполнителем с сайта http://lipsum.com/.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis sit amet magna in tristique.
        Phasellus at accumsan arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Aenean consectetur, odio pellentesque faucibus dapibus, lacus nunc elementum est, ac mattis orci augue vel nisl.
        </p>
        </div>
    </div> 
</div> 
<div id="two">
	<div class="content">
    	<div class="right">
            <h2>Content number 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis sit amet magna in tristique.
        Phasellus at accumsan arcu.</p>
        </div>
    </div>   
</div> 
<div id="three">
	<div class="content">
    	<div class="left">
        	<h2>Content number 3</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis sit amet magna in tristique.
        Phasellus at accumsan arcu.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis sit amet magna in tristique.
        Phasellus at accumsan arcu.</p>
        </div>
    </div> 
</div> 
</body>
</html>

 

Здесь ничего мудреного нет.

Сначала идет навигация, которая представляет собой ненумерованный список. Далее хедер – в нем у нас находится только заголовок. После хедера поочередно прописаны три дива с идентификаторами one, two и three. Эти дивы и есть наши страницы. В моем примере их будет три штуки. Если Вам нужно будет больше, то по аналогии добавляйте новые дивы.

Внутри дивы страниц содержат див с классом «content», заголовок и небольшой текст. Это собственно и есть наш контент, который будет выводится на странице.

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

верстка для страницы с Параллакс Скроллингом

3. Давайте создадим файл таблицы стилей. Я назову его «parallax.css», сохраню в том же каталоге, что и основной наш файл. Сейчас мы пропишем основные стили для элементов нашей страницы.

body{margin: 0; min-width: 980px; padding: 0;}
p{margin: 0 0 20px 0;}
p, ul{font-family: Arial, Helvetica, sans-serif; font-size-adjust:0.488;}
img{border: 0;}
h1{font-family:"Convergence", Arial, Helvetica, sans-serif; font-size-adjust:0.40;
	font-weight:700; font-style:normal;}
h2{font-family:"Convergence", Arial, Helvetica, sans-serif; font-size-adjust:0.531;
	font-weight:500; font-style:normal;}
#header h1{color: #48941A;}
.left{float: left; margin: 0 0 0 20px;}
.right{float: right; margin: 0 20px 0 0;}
#nav{list-style: none; position: fixed; right: 20px;}
#nav li{margin: 0 0 15px 0;}
#header{background: white; height: 130px; width: 100%;}
.content{margin: 0 auto; min-width: 980px; width: 980px;}
.content .left, .content .right{padding: 100px 0 0 0; position: relative; width: 350px;}

 

Здесь пояснять особо нечего. В основном это обычные стили: шрифт, отступы, высота и т. д. Если Вы обратите внимание, то у двух наших дивов с контентом присутствует класс «.left», а у одного класс «.right». В стилях Вы можете увидеть соответствующие выравнивания контента. То есть на двух страницах контент будет находится слева, а на одной справа.

Также здесь есть один нестандартный шрифт “Convergence”. Пока что он не отображается, но скоро мы его подключим.

А пока наша страница выглядит вот таким образом.

применение стилей для страницы с Параллакс Скроллингом

4. Теперь давайте подключим нашу таблицу стилей к html-документу. А заодно подключим нестандартный шрифт (прямо с сайта Гугл), библиотеку jQuery и все остальные необходимые нам скрипты.

Сразу после тега «title», перед закрывающим тегом «header» пропишем все эти подключения.

<link href="http://fonts.googleapis.com/css?family=Convergence" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="parallax.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="scripts/parallax.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="scripts/jquery.inview.js"></script>

 

А сразу после подключения пропишем следующий скрипт.

<script type="text/javascript">
$(document).ready(function(){
	$('#nav').localScroll();
})
</script>

 

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

подключение нестандартного шрифта на страницу

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

5. Давайте снова откроем файл таблицы стилей и пропишем стили для каждой страницы.

#one{background:url(images/colour.jpg) 50% 0 no-repeat fixed;
	color:#fff;
	height:600px;
	margin:0;
	padding:160px 0 0 0;}
#two{background:url(images/cloud.jpg) 50% 0 no-repeat fixed;
	color:#000;
	height:1300px;
	margin:0 auto;
	overflow:hidden;
	padding:0;}
#three{background:url(images/golf.jpg) 50% 0 no-repeat fixed;
	color:#000;
	font-weight:bold;
	height:650px;
	padding:100px 0 0 0;}

 

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

сайт в стиле Parallax Scrolling

Теперь наш Параллакс Скроллинг прекрасно работает. Можете проверить.

Но было бы неправильно прямо сейчас закончить наш урок, не разобравшись с фалом «parallax.js».

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

Давайте посмотрим, что он содержит.

$(document).ready(function() {
	
	var $window = $(window);
	var $one = $('#one');
	var $two = $('#two');
	var windowHeight = $window.height();
	
	$('#one, #two').bind('inview', function (event, visible) {
		if (visible == true) {
			$(this).addClass("inview");
			} else {
			$(this).removeClass("inview");
		}
	});
	
	function Navigation(){
		var windowHeight = $window.height(); 
		var navHeight = $('#nav').height() / 2;
		var windowCenter = (windowHeight / 2); 
		var newtop = windowCenter - navHeight;
		$('#nav').css({"top": newtop}); 
	}
	
	function movePos(x, windowHeight, pos, offset, speed){
		return x + "% " + (-((windowHeight + pos) - offset) * speed)  + "px";
	}
	
	function Parallax(){ 
		var pos = $window.scrollTop(); 
		if($one.hasClass("inview")){
			$one.css({'backgroundPosition': movePos(50, windowHeight, pos, 900, 0.3)}); 
		}
		if($two.hasClass("inview")){
			$two.css({'backgroundPosition': movePos(50, windowHeight, pos, 1250, 0.3)});
		}	
	}	
	Navigation(); 
	$window.resize(function(){ 
		Parallax(); 
		Navigation();
	});		
	$window.bind('scroll', function(){ 
		Parallax(); 
	});
	
});

 

Мы объявляем переменные для всех наших дивов страниц (кроме последней), а также для объекта window.

Далее мы проверяем: если страница находится в области видимости, то мы этому диву присваиваем класс “inview”, если нет – то этот класс у дива удаляем.

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

Результаты работы функции movePos будут использованы в качестве позиции бэкграунда (backgroundPosition) в функции Parallax.

Функция Parallax проверяет, находится ли определенный див в области видимости, и если да, то выставляет свойство backgroundPosition на нужную величину.

После объявления все эти функции вызываются в определенном порядке, и наш Параллакс Скроллинг работает.

Таким образом, если Ваших страниц будет больше чем 3, то в начале файла «parallax.js» нужно будет объявить дополнительные переменные для дополнительных дивов. Также добавить их в выборку (там, где проверяется видимость, и присваивается или удаляется класс “inview”) и по аналогии прописать условия для дополнительных дивов в функции Parallax.

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

Все здесь делается по аналогии, поэтому, если Вы не сильны в JavaScript, то не расстраивайтесь, просто внимательно посмотрите на код, прочитайте еще раз то, что написано выше и сделайте так. Уверена, что у Вас все получится!

На этом буду прощаться. Надеюсь урок Вам понравился и все у Вас получилось.

Жду Ваших комментариев! Делитесь уроком в соц. сетях, подписывайтесь на обновление блога.

До новых встреч!

Leave a Reply