Использование вертикального скроллинга и вертикального параллакса при создании сайтов

WEB дизайн

Эффект параллакса (неравномерного смещения одних элементов относительно других) часто используется для придания большей выразительности и 3D-эффекта процессу вертикального скроллинга (прокрутки) одностраничного сайта. Посмотреть пример сайта с эффектом параллакса
Сейчас мы расскажем на примере, как без особых усилий сделать ваш одностраничный сайт ещё более привлекательным.

Техническое задание

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

Реализация

1. Задаем неподвижное фоновое изображение, занимающее всю площадь окна браузера и полупрозрачную подложку под контент страницы

Содаем файл index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Вертикальный скроллинг & Вертикальный параллакс</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" media="all" href="/css/main.css" />
  </head>
  <body>
    <div id="subbg">
      <div id="wrapper">
        Здесь будет размещен контент страницы
      </div>
    </div>
  </body>
</html>

Создаем файл стилей main.css

body {
	background: url(../img/bg.jpg) fixed; /*задаем неподвижное фоновое изображение */
	background-size: 100% 100%;
	overflow-x: hidden;
	height: 3300px;
    }
#subbg {
	background:url(../img/subbg.png) repeat-y center fixed; /* полупрозрачная полоса под контентом */
	height: 3300px;
    }
#wrapper {
	position: relative;
	z-index:999;
    }

2. Добавляем неподвижный верхний блок с элементами навигации

Добавляем в контейнер wrapper файла index.html

<header id="fixed-header-bar">
  <div class="top-bar">
    <h1>Вертикальный скроллинг & Вертикальный параллакс</h1>
    <nav id="navigation">
      <ul>
        <li><a class="position1" href="#position1">Пункт №1 &#8226;</a></li>
        <li><a class="position2" href="#position2">Пункт №2 &#8226;</a></li>
	<li><a class="position3" href="#position3">Пункт №3 &#8226;</a></li>
	<li><a class="position4" href="#position4">Пункт №4</a></li>
      </ul>
    </nav>
  </div>
</header>

Задаем для них стили в файле main.css

 #fixed-header-bar {
	width: 100%;
	background: #000;
	position: fixed;
        z-index: 9999;
	}
#fixed-header-bar h1 {
	float: left;
	width: 590px;
	padding: 10px 15px;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: bold;
	}
.top-bar {
	width: 1090px;
	margin: 0 auto;
        }
#navigation {
	width:400px;
}
nav#navigation {
	z-index: 5;
	float: right;
	margin-top: 10px;
	z-index:99999;
}
nav#navigation li {
	position: relative;
	height: 20px;
	float: left;
}
nav#navigation a {
	display: block;
	width: 90px;
	height: 20px;
}

3. Формируем контент с элементами навигации

Добавляем в контейнер wrapper файла index.html

<div id="content">
  <article id="position1">
    <header>
      <h2>Пункт №1</h2>
    </header>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit"</p>
    <nav class="next-prev">
      <hr />
      <a class="next position2" href="#position2">Перейти к Пункту №2</a>
    </nav>
  </article>
  
  <article id="position2">
    <header>
      <h2>Пункт №2</h2>
    </header>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit"</p>
    <nav class="next-prev">
      <a class="prev position1" href="#position1">Перейти к Пункту №1</a>
      <hr />
      <a class="next position3" href="#position3">Перейти к Пункту №3</a>
    </nav>
  </article>
				
  <article id="position3">
    <header>
      <h2>Пункт №3</h2>
    </header>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit"</p>
    <nav class="next-prev">
      <a class="prev position2" href="#position2">Перейти к Пункту №2</a>
      <hr />
      <a class="next position4" href="#position4">Перейти к Пункту №4</a>
    </nav>
  </article>
				
  <article id="position4">
    <header>
      <h2>Пункт №4</h2>
    </header>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit"</p>
    <nav class="next-prev">
      <a class="prev position3" href="#position3">Перейти к Пункту №3</a>
        <hr />
      <a class="prev position1" href="#position1">Перейти к Пункту №1</a>
    </nav>
  </article>
</div>

Задаем стили в файле main.css

nav.next-prev {
	margin: 20px 0 0 0;
	}
a.prev,	a.next {
	display: block;
	height: 22px;
	padding-left: 40px;
	}
a.prev {
	margin: 0 auto 5px auto;
	background: transparent url('../img/scroll-arrow-up.png') 0 0 no-repeat;
	}
a.prev:hover {
	background: transparent url('../img/scroll-arrow-up.png') 0 -22px no-repeat;
	}
a.next {
	margin: 5px auto 0 auto;
	background: transparent url('../img/scroll-arrow-down.png') 0 0 no-repeat;
	}
a.next:hover {
	background: transparent url('../img/scroll-arrow-down.png') 0 -22px no-repeat;
	}

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

Добавляем в контейнер wrapper файла index.html

<!-- Нижние фоновые изображения -->
<div id="parallax-bg1">
	<img id="bg1-1" src="/img/image-bg1.png" alt=""/>
	<img id="bg1-2" src="/img/image-bg2.png" alt=""/>
	<img id="bg1-3" src="/img/image-bg3.png" alt=""/>
	<img id="bg1-4" src="/img/image-bg4.png" alt=""/>
</div>  
           
<!-- Средние фоновые изображения -->
<div id="parallax-bg2">
	<img id="bg2-1" src="/img/image-bg1.png" alt=""/>
	<img id="bg2-2" src="/img/image-bg2.png" alt=""/>
	<img id="bg2-3" src="/img/image-bg3.png" alt=""/>
	<img id="bg2-4" src="/img/image-bg4.png" alt=""/>
</div>
			
<!-- Изображения контента -->
<div id="parallax-bg3">
	<img id="bg3-1" src="/img/img-content1.png" alt=""/>
	<img id="bg3-2" src="/img/img-content2.png" alt=""/>
	<img id="bg3-3" src="/img/img-content3.png" alt=""/>
        <img id="bg3-4" src="/img/img-content4.png" alt=""/>
</div>

И описываем их стили в файле main.css

/* Изображения контента */
#parallax-bg3 {
	z-index: 1;
	position: fixed;
	left: 50%; /* установка по центру */
	top: 0;
	width: 940px;
	}
	
#bg3-1 {
	position: absolute;
	top: 110px;
	left: -50px;
	}
#bg3-2 {
	position: absolute;
	top: 710px;
	left: -50px;
	}
#bg3-3 {
	position: absolute;
	top: 1300px;
	left: -50px;
	}
#bg3-4 {
	position: absolute;
	top: 1920px;
	left: -50px;
	}
img#bg3-1, img#bg3-2, img#bg3-3, img#bg3-4 {
	-webkit-box-shadow: 3px 3px 1px #666;
        box-shadow: 3px 3px 1px #666;
	border: 3px solid #border-radius: 50%;
	border: 4px solid #ECF0F1;
        }
img#bg3-2, img#bg3-4 {
	border-radius: 50%;
        }
			
/* Средние фоновые изображения */
#parallax-bg2 {
	z-index: -1;
	position: fixed;
	left: 50%; /* установка по центру */
	top: 0;
	width: 1200px;
	}
#bg2-1 {
	position: absolute;
	top: 250px;
	left: 350px;
	}
#bg2-2 {
	position: absolute;
	top: 600px;
	left: -650px;
	}
#bg2-3 {
	position: absolute;
	top: 900px;
	left: 450px;
	}
#bg2-4 {
	position: absolute;
	top: 1400px;
	left: -750px;
	}
	
/* Нижние фоновые изображения */
#parallax-bg1 {
	z-index: -1;
	position: fixed;
	left: 50%; /* установка по центру */
	top: 0;
	width: 1200px;
	}
#bg1-1 {
	position: absolute;
	top: 100px;
	left: -690px;
	}
#bg1-2 {
	position: absolute;
	top: 450px;
	left: 300px;
	}
#bg1-3 {
	position: absolute;
	top: 900px;
	left: -700px;
	}
#bg1-4 {
	position: absolute;
	top: 1350px;
	left: 400px;
	}

5. Подключаем скрипты для плавного перемещения контента

Помещаем в файл index.html внутри тэгов <head>...</head>

<script src="/js/modernizr.custom.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
<script src="/js/parallax.js"></script>

Наслаждаемся сделанным!

Посмотреть пример

Скачать исходные файлы

Остались вопросы? Или хотите получить что-то необычное?
Пишите нам на Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. и мы вам обязательно поможем.