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

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

Шаг 1. HTML

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

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

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

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

Шаг 2. CSS

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

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

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

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

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

Шаг 3. jQuery

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

Вот и все. Готово!