Как создать параллакс эффект для сайта?
Параллакс эффект для сайта стал популярным после того, как Nike запустил свой сайт "Nike Better World". Сайт получил множество положительных отзывов от разных ресурсов за свой замечательный эффект параллакс-прокрутки и веб-дизайн.
Параллакс-эффект существовал с 1980-х годов и использовался в видеоиграх, а потом на сайтах.
Примеры параллакс эффекта для сайта: что такое параллакс-прокрутка?
Вы уже видели примеры его использования. Перед тем как углубиться в примеры сайтов, использующих параллакс-эффект, уделим немного времени объяснению того, что же он собой представляет.
Параллакс – это видимое смещение или разница в видимом положении объекта, если он просматривается с двух разных точек, не лежащих на одной прямой с объектом. В веб-дизайне под параллаксом понимается техника прокручивания, используемая для создания иллюзии глубины сайта.
Это не новая техника. Но прошло немало времени между её появлением и недавним рывком в трендовые стили. Чтобы показать, как выглядит параллакс-эффект при прокрутке, я собрал сайты, которые используют этот приём.
Посмотрите на примеры:
Учимся создавать параллакс эффект для сайта
Существует четыре метода, которые могут быть использованы для того чтобы создать параллакс эффект для сайта.
- Послойный метод – использование нескольких фоновых изображений, которые могут независимо перемещаться горизонтально или вертикально, и расположены одно над другим.
- Метод спрайтов – использование одного большого изображения, составленного из нескольких, и отображение только части большого изображения в различных позициях. Часто используется в меню навигации.
- Метод повторяющегося шаблона – контент для прокрутки строится из отдельных плиток, которые могут перемещаться над повторяющимся слоем фона.
- Растровый метод – линии пикселей изображения скомбинированы и обновляются сверху вниз с небольшой задержкой между прорисовкой линий.
Руководство по разработке параллакс эффекта для сайта
Что вам понадобится для реализации этого примера параллакс-прокрутки:
- Wellfleet (шрифт Google);
- Arvo (шрифт Google);
- Oswald (шрифт Google);
- Goudy Bookletter 1911 (шрифт Google);
- Изображения, использованные в этом примере;
- Рождественские изображения в высоком разрешении. Вы можете загрузить бесплатные изображения отсюда или использовать изображения из архива, ссылка на который приведена выше.
Файловая структура
Для файловой структуры параллакс эффекта для сайта мы создадим три папки и один HTML-файл:
- html – будет главным файлом. Весь дизайн будет расположен в этом файле;
- Папка js – для скриптов JavaScript/jQuery;
- Папка img – для изображений;
- папка css – для CSS-стилей.
HTML -разметка
В файл index.html сначала добавим объявление типа документа HTML5, а также группу ссылок в заголовок <head>. Туда будет включена ссылка на файл CSS, шрифты Google, а также файл библиотеки jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a Simple Parallax Scrolling Website</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-3.3.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911' rel='stylesheet' type='text/css'>
<script>
</script>
</head>Пропустим код параллакс эффекта для сайта и обсудим его позже. А пока продолжим работу с HTML-элементами. Мы добавим тэг header с логотипом и навигацией внутри. Навигация будет вести на определённые слайды. Позже мы добавим эффект плавной прокрутки, чтобы это смотрелось красиво.
<body>
<!----- НАЧАЛО СЕКЦИИ HEADER --->
<header id="header">
<div class="content">
<div id="logo"><a href=""> PARALLAX </a></div>
<nav id="nav">
<ul>
<li><a href="#slide1" class="active" title="Next Section" >Slide 1</a></li>
<li><a href="#slide2" title="Next Section">Slide 2</a></li>
<li><a href="#slide3" title="Next Section">Slide 3</a></li>
<li><a href="#slide4" title="Next Section">Slide 4</a></li>
<li><a href="#slide5" title="Next Section">Slide 5</a></li>
</ul>
</nav>
</div>
</header>Теперь добавим слайды для параллакс эффекта в блоке. Мы пометим каждый из них атрибутом ID, который будет соответствовать его порядковому номеру. Внутрь слайда мы поместим блок с классом content, чтобы выровнять элементы по центру.
<!----- НАЧАЛО СЛАЙДОВ --->
<div id="slide1">
<div class="content">
<div id="christmas_tree"> </div>
<div id="snowflakes1"></div>
<div id="snowflakes2"></div>
<h2>MERRY</h2>
<h1>CHRISTMAS</h1>
<div id="divider"> </div>
<h3>HAPPY NEW YEAR </h3>
<div id="ribbon"></div>
<div id="new_year"> </div>
</div>
</div>
<div id="slide2">
<div class="content" >
<div class="quotes_container">
<h3 class="quotes">“Then the Grinch thought of something he hadn't before! What if Christmas, he thought, doesn't come from a store. What if Christmas...perhaps...means a little bit more!”</h3>
<img src="img/dr-seuss.png" align="left"/> <h4 class="author_name_gray">Dr. Seuss </h4>
</div>
</div>
</div>
<div id="slide3">
<div class="content">
<div class="quotes_container">
<h3 class="quotes">“I truly believe that if we keep telling the Christmas story, singing the Christmas songs, and living the Christmas spirit, we can bring joy and happiness and peace to this world.” </h3>
<img src="img/norman.png" align="left"/> <h4 class="author_name_white">Norman Vincent Peale </h4>
</div>
</div>
</div>
<div id="slide4">
<div class="content">
<div class="quotes_container">
<h3 class="quotes">“Christmas doesn't come from a store, maybe Christmas perhaps means a little bit more....” </h3>
<img src="img/dr-seuss.png" align="left"/> <h4 class="author_name_gray">Dr. Seuss </h4>
</div>
</div>
</div>
<div id="slide5">
<div class="content">
<div class="quotes_container">
<h3 class="quotes">“My idea of Christmas, whether old-fashioned or modern, is very simple: loving others. Come to think of it, why do we have to wait for Christmas to do that?” </h3>
<img src="img/bob.png" align="left"/> <h4 class="author_name_white">Bob Hope </h4>
</div>
<div id="copyright"><a href="https://1stwebdesigner.com/">Copyright 1stwebdesigner.com </a></div>
</div>
</div>
<!----- КОНЕЦ СЛАЙДОВ --->
</body>
</html>Теперь, когда мы поместили все HTML-элементы на страницу, сайт выглядит вот так.
CSS-стили
Начнём с добавления стилей параллакс эффекта для тега body, а также заголовков H1, H2 и H3. Мы установим шрифт “Arvo” для заголовков H1-H2.
body{
margin: 0;
padding: 0;
width: 100%;
}
h1 {
font-family: "Arvo";
font-weight: normal;
font-size: 55px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
}
h2 {
font-family: "Arvo";
font-weight: normal;
font-size: 40px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
}
h3 {
font-family: Oswald;
font-weight: normal;
font-size: 16px;
text-align: center;
margin: 5px 0;
padding: 0;
z-index: 1;
position: relative;
}Затем добавим основные стили для позиционирования элементов на экране и контента в слайдах.
.center { margin: 0 auto; }
.content{ margin: 0 auto; width: 960px; }
.clear { clear: both; }Теперь стилизуем секцию заголовка параллакс эффекта для сайта. Добавим изображение с чёрным фоном и прозрачностью в 60% в заголовок, который будет содержать логотип и навигацию. Логотип разместим слева, а навигацию – справа.
#header {
width: 100%;
background: url('../img/header-bg.png');
height: 80px;
position: fixed;
margin-top: 30px;
}
#nav { width: 410px; float: right; margin-top: 20px; }
#logo a {
color: #fff;
text-decoration: none;
float: left;
font-size: 30px;
margin-top: 20px;
color: #fff;
font-family: "Wellfleet";
font-weight: bold;
}
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
list-style: none;
}
#nav li{
margin-top: 9px;
float: left;
padding-left: 21px;
}
#nav li a {
color: #fff;
opacity:0.6;
font-size: 16px;
text-decoration: none;
font-family: 'Wellfleet';
}
#nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; }
#nav li a:hover { color: #fff; opacity:1; }Стилизуем цитаты, авторов и изображения, а также контейнеры цитат.
.quotes {
font-family: 'Goudy Bookletter 1911', serif;
font-weight: normal;
font-size: 30px;
text-align: left;
margin: 50px auto;
}
.author_name_white {
font-family: "Wellfleet";
margin: 70px 0 0 75px;
color: #fff;
font-size: 20px;
}
.author_name_gray {
font-family: "Wellfleet";
margin: 70px 0 0 75px;
color: #94a4a4;
font-size: 20px;
}
.quotes_container {
width: 800px;
margin: 0 auto;
}
#christmas_tree {
background: url('../img/christmas-tree.png') no-repeat;
width: 48px;
height: 77px;
margin: 0 auto;
position: relative;
bottom: -35px;
}
#divider {
background: url('../img/divider.png') no-repeat;
width: 300px;
height: 35px;
margin: 0px auto 27px auto;
}
#ribbon {
background: url('../img/ribbon.png') no-repeat;
width: 251px;
height: 48px;
margin: 0 auto;
display: block;
position: relative;
top: -38px;
}
#snowflakes1 {
background: url('../img/snowflakes.png') no-repeat;
width: 24px;
height: 21px;
margin: 0 auto;
display: block;
position: relative;
bottom: -54px;
left: -102px;
}
#snowflakes2 {
background: url('../img/snowflakes.png') no-repeat;
width: 24px;
height: 21px;
margin: 0 auto;
display: block;
position: relative;
bottom: -33px;
right: -100px;
}Каждый слайд в параллакс эффекте для сайта будет иметь фоновое изображение или белый фоновый цвет с фиксированной позицией. Также нужно добавить небольшие отступы к каждому слайду, чтобы выровнять элементы по центру.
#slide1, #slide2 { width: 100%; }
#slide1 {
background:url('../img/slide1.jpg') 50% 0 no-repeat fixed;
color: #fff;
height: 600px;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}
#slide2 {
background-color: #fff;
color: #333333;
height: 300px;
margin: 0 auto;
overflow: hidden;
padding: 200px 0;
}
#slide3 {
background: url(../img/slide3.jpg) 50% 0 no-repeat fixed;
color: #fff;
height: 600px;
padding: 170px 0 0 0;
background-size: cover;
}
#slide4 {
background-color: #fff;
color: #333333;
height: 300px;
padding: 200px 0;
}
#slide5 {
background: url(../img/slide5.jpg) 50% 0 no-repeat fixed;
height: 200px;
margin: 0 auto;
padding: 250px 0;
color: #fff;
background-size: cover;
}Зададим стили текста о защите авторских прав и выровняем его по центру.
#copyright {
color: #fff;
font-family: "Wellfleet";
font-size: 14px;
margin-top: 100px;
text-align: center;
}
#copyright a { text-decoration: none; color: #fff; }Теперь, когда мы добавили все CSS-стили, сайт выглядит в точности как в примере.
Код jQuery
Вдохнём жизнь в наш сайт с параллакс эффектом. В раздел head добавим следующий код jQuery.
$(document).ready(function() {
$("a[href*='#']").each(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname && this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$("#nav li a").removeClass("active");
$(this).addClass('active');
$('html, body').animate({scrollTop: targetOffset}, 1000);
return false;
});
}
}
});
});В этой части параллакс эффект для сайта мы создаём обработчик нажатия на любую из ссылок, имеющих символ “#” где-либо в атрибуте href. В следующей строке мы проверяем, ведёт ли ссылка на ту же страницу, ища совпадения в location.pathname. Так мы уверены, что код будет работать как со ссылками, включающими в себя полный URL, так и с теми, которые состоят только из идентификатора.
$(document).ready(function() {
$("a[href*='#']").each(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname && this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;В этой части кода обрабатывается нажатие пользователя на ссылку в меню. При этом класс active удаляется из текущей активной ссылки меню и добавляется к той ссылке, по которой перешел пользователь. Также произойдёт прокрутка страницы к соответствующему блоку.
$(this).click(function() {
$("#nav li a").removeClass("active");
$(this).addClass('active');
$('html, body').animate({scrollTop: targetOffset}, 1000);
return false;
});
}
}
});
});Совет: Можно делать скорость эффекта прокрутки быстрее или медленнее, меняя значение 1000 (1000 миллисекунд). Можно попробовать значения “fast” (200 миллисекунд) или “slow” (600 миллисекунд). Обратите внимание, что значение по умолчанию 400 миллисекунд.
$('html, body').animate({scrollTop: targetOffset}, 1000);Этот эффект можно сделать самому.
Заключительные слова о параллакс эффекте для сайта
Прокрутка с параллакс эффектом для сайта постепенно внедряется на множестве интернет-ресурсов. В этой статье я показал, как реализовать простой эффект параллакс-прокрутки. Вы можете поэкспериментировать с ним и улучшить его.