Все для веб-дизайнера
Parallax scrolling для сайта с помощью jQuery
В последнее время вы можете наблюдать возрастающий интерес к сайтам с эффектом параллакса, в этом ничего удивительного, ведь данный эффект стирает стереотипы о сайтостроении и веб-дизайне в целом. Прокрутка сайта с помощью параллакса это процесс простой анимации, который создаёт иллюзию глубины. Анимация передних слоёв быстрее, чем анимация фона. В данном уроке мы рассмотрим как создать такую прокрутку, Вы можете скролить обычным способом, использовать меню навигации в правой части страницы или кнопки, которые появляются вверху каждой статьи.
Страница содержит три, независимо друг от друга анимированных слоя, для создания иллюзии глубины. И так, приступим.
Шаг 1. HTML
Для начала нам необходимо подключить все стили и скрипты, которые отвечают за анимацию и работоспособность прокрутки.
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="scripts/nbw-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> |
Все скрипты вы сможете найти в исходным материалах. Теперь рассмотрим саму разметку для прокрутки, которые будут закреплены в правом верхнем углу, с помощью которых можно легко осуществлять навигацию по слайдам.
|
1 2 3 4 5 6 7 |
<ul id="nav"> <li><a href="#intro" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> <li><a href="#second" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> <li><a href="#third" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> <li><a href="#fourth" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> <li><a href="#fifth" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> </ul> |
Теперь рассмотрим неупорядоченный список, который обеспечивает быстрый переход к каждому разделу. Без JavaScript, эти ссылки будут выступать в качестве якорей, которые будут прыгать без эффекта на нужный материал. С помощью JQuery, мы придадим плавную прокрутку которая поможет продемонстрировать эффект параллакса, что мы и собираемся осуществить.
|
1 2 3 4 5 |
<div id="intro"> <div class="story"> Описание </div> <!--.story--> </div> <!--#intro--> |
После того как у нас есть контейнеры с материалом мы приступим к рассмотрению стилей.
Шаг 2. CSS
Я не буду описывать все параметры CSS,а только те, которые имеют отношение к эффекту параллакса. Давайте взглянем на CSS для HTML контейнера:
|
1 2 3 4 5 6 7 |
#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, будут иметь белую границу.
|
1 2 3 4 5 |
.story{ margin: 0 auto; min-width: 980px; width: 980px; } |
Некоторые статьи имеют несколько фонов. В данном примере достигается это с помощью дополнительного контейнера в HTML, который мы добавим:
|
1 2 3 4 5 6 |
<div id="second"> <div class="story"> <div class="bg"></div> Описание </div> <!--.story--> </div> <!--#second--> |
DIV с классом «bg» имеет свой собственный фон:
|
1 2 3 4 5 6 7 |
#second .bg{ background: url(images/trainers.png) 50% 0 no-repeat fixed; ... position: absolute; ... z-index: 200; } |
Стилями завершили, теперь рассмотрим некоторые параметры jQuery.
Шаг 3. jQuery
В последнем шаге мы рассмотрим скорость анимационной прокрутки для слоев, для этого нам необходимо поместить данный код в разметку HTML документа, заключив его в теги <scritp></script>
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function(){ $('#nav').localScroll(800); //.parallax(xPosition, speedFactor, outerHeight) опции: $('#intro').parallax("50%", 0.1); $('#second').parallax("50%", 0.1); $('.bg').parallax("50%", 0.4); $('#third').parallax("50%", 0.3); }) |
Вот и все. Готово!
| Опубликовал Cooper 15.09.2012 в 18:08, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
