Parallax scrolling для сайта с помощью jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Страница содержит три, независимо друг от друга анимированных слоя, для создания иллюзии глубины. И так, приступим.

Шаг 1. HTML

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

$(document).ready(function(){

$('#nav').localScroll();

})

</script>

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

</ul>

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

Описание

</div>

</div>

После того как у нас есть контейнеры с материалом мы приступим к рассмотрению стилей.

Шаг 2. CSS

Я не буду описывать все параметры CSS,а только те, которые имеют отношение к эффекту параллакса. Давайте взглянем на CSS для HTML контейнера:

#intro{

background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;

color: white;

height: 600px;

margin: 0;

padding: 160px 0 0 0;

}

В первой статье (#Intro), будет иметь одно фоновое изображение высотой 600px. Ширина не определена, таким образом, изображение будет растягиваться до 100%. Каждое фоновое изображение для статьи я сделал 1900px поэтому большинство мониторов будет иметь полное фоновое изображение. Все остальные, что свыше 1900px, будут иметь белую границу.

.story{

margin: 0 auto;

min-width: 980px;

width: 980px;

}

Некоторые статьи имеют несколько фонов. В данном примере достигается это с помощью дополнительного контейнера в HTML, который мы добавим:

Описание

</div>

</div>

DIV с классом «bg» имеет свой собственный фон:

#second .bg{

background: url(images/trainers.png) 50% 0 no-repeat fixed;

...

position: absolute;

...

z-index: 200;

}

Стилями завершили, теперь рассмотрим некоторые параметры jQuery.

Шаг 3. jQuery

В последнем шаге мы рассмотрим скорость анимационной прокрутки для слоев, для этого нам необходимо поместить данный код в разметку HTML документа, заключив его в теги <scritp></script>