—»     —»   Одностраничный веб-сайт с вертикальным параллаксом
  Раздел: Руководства   Комментариев: 2  

Одностраничный веб-сайт с вертикальным параллаксом



Время от времени появляется что-то новое, способное сотрясти мир и мотивировать каждого человека заняться делом, а не стоять на месте, и ведь это можно отнести практически к любому типу бизнеса. Некоторое время назад, компания Nike продемонстрировала миру великолепный дизайн сайта под названием «Nike Better World», предназначенный для поддержки спортсменов по всему миру. Самое главное в этом сайте заключалось в его навигационном меню, основанном на фантастическом вертикальном параллакс-скроллинге.

Одностраничный веб-сайт с вертикальным параллаксом

Сегодня мы хотели бы разобрать структуру этого веб-сайта, и создать нечто похожее на веб-сайт от Nike с помощью jQuery и CSS. Существует много различных способов, которые помогут вам добиться для данного эффекта, но сегодня мы воспользуемся библиотекой jQuery. Далее вы сможете использовать этот эффект практически для любого веб-сайта, будь то ваш личный сайт-портфолио, либо коммерческий проект. Здесь мы представим вам как логическую часть, так и посвятим время разработке кода, так что вы сможете полноценно понять принцип работы механизма данной страницы. Давайте же приступим!

Посмотреть демо | Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.


Как это работает?

Как уже говорилось во вступлении, существуют различные способы создания эффекта параллакс, и это всего лишь один из них, который включает в себя библиотеку jQuery. Относительно кода мы можем сказать, это навигационное меню было специальным образом разработано так, чтобы при прокрутке экрана пользователем вверх или вниз, у нас оставалась возможность представить всю страницу традиционным образом. Система состоит из 4 отделов: 2 из них будут содержать 2 div’а, что в целом даст нам 6 отделов.

Если мы просто разместим все div’ы, у нас не будет возможности видеть эффект, так как ключевой элемент заключается в воспроизведении и ускорении. Благодаря jQuery мы можем указать различные значения касательно скорости прокрутки, и за счет этого у нас будет возможность максимально приблизиться к эффекту, реализованному командой разработчиков для сайта Nike, который так же состоит из различных элементов, перемещающихся с разной скоростью.

Одностраничный веб-сайт с вертикальным параллаксом

Понимание сути эффекта, использованного для сайта Nike

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

Одностраничный веб-сайт с вертикальным параллаксом

Этап 1: HTML-код

Теперь, когда мы ознакомились с логикой, стоящей за параллакс-навигацией, мы можем перейти к разработке кода. Код вполне прост, нам просто нужно указать HTML-файл, который будет называться index.html, а затем оформить его в соответствии со следующими строками кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nikebetter world</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.5.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/functions.js"></script>

</head>

<body>
<div class="header" align="center" >
<img class="header_bk_final" src="http://www.webdesignshock.com/demos/photo_slider/img/header_banner.png" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area id="twitter_share" shape="rect" coords="766,62,798,99" href="#" />
<area id="facebook_share" shape="rect" coords="800,63,833,100" href="#" />
<area id="twitter_follow" shape="rect" coords="878,68,909,98" href="http://twitter.com/TutorialShock" />
<area id="facebook_follow" shape="rect" coords="911,67,941,98" href="http://www.facebook.com/pages/TutorialShock/134270309924818" />
<area id="homepage" shape="rect" coords="27,8,359,85" href="http://www.webdesignshock.com/" />
<area id="link_1" shape="poly" coords="495,79,607,80,621,61,645,54,642,28,453,28,452,53" href="#" />
</map>
</div>
<a class="themshock_banner" href="http://www.wordpressthemeshock.com/the-shock-bundle/"><img src="img/shock-bundle.jpg" border="0" alt="loading_image" /></a>
<div class="bk bk_0">
<!--This is the first background and the remaining objects-->
<div class="img_1"></div>
<!--This is our bell's picture-->
</div>
<div class="bk_blank title_1">
<!--This is the first white bar-->
</div>
<div class="bk bk_1">
<!-- This is the second background along with the remaining pictures-->
<div class="img_2"></div>
<!--This is our Polaroid camera picture-->
</div>
<div class="bk_blank title_2"></div>
<!--This is the second white bar-->
<div class="footer" >
<div>
<img src="http://www.webdesignshock.com/demos/photo_slider/img/rss_image.png" border="0" usemap="#Map2" class="rss_image" />
<map name="Map2" id="Map2">
<area shape="circle" coords="475,80,61" href="http://feeds.feedburner.com/TutorialShock" />
</map>
</div>
</div>
</body>
</html>

Этап 2: Работаем с jQuery

После того, как мы разобрались с нашим HTML-файлом, все готово для волшебства, которое мы сотворим посредством jQuery. Код был отлично задокументирован во избежание недопонимания, которое может возникнуть в ходе разработки. Так что, давайте приступим к рассмотрению кода, необходимого для реализации эффекта.

jQuery(document).ready(function($) {
a=parseFloat(400);// Initial value for the first background (bk 0)
b=parseFloat(0);// Initial value for the first background (bk 0)
c=parseFloat(400);// Initial value for the second background (bk 1)
d=parseFloat(0);// Initial value for the second background (bk 1)
var scrollTop = $(window).scrollTop();
var scroll_actually= new Array();// Identifies the X and Y values for the background

$(window).scroll(function(){//This is not the cleanest way to do this, I'm just keeping it short.
if(scrollTop>$(this).scrollTop()) // Scroll up
{
if (getScrollTop()<=1600 && getScrollTop()>=0)// Identifies the position for the first background when a scroll event occurs
{
a=a+35;// Position for the first background, it decreases in 35 pixels
b=b+10;// Position for the first background, it decreases in 10 pixels
$('.img_1').css('backgroundPosition', '50% '+a+'px');
$('.bk_0').css('backgroundPosition', '0 '+b+'px');
}
if (getScrollTop()>=2050 && getScrollTop()<=3650)
{
c=c+35;// Position for the second background, it decreases in 35 pixels
d=d+10;// Position for the second background, it decreases in 10 pixels
$('.img_2').css('backgroundPosition', '50% '+c+'px');
$('.bk_1').css('backgroundPosition', '0 '+d+'px');
}
}
else
{// Scroll down
if (getScrollTop()>=0 && getScrollTop()<=1600)
{
a=a-35;// Position for the first background, it decreases in 35 pixels
b=b-10;// Position for the first background, it decreases in 10 pixels
$('.img_1').css('backgroundPosition', '50% '+a+'px');
$('.bk_0').css('backgroundPosition', '0 '+b+'px');
}
if (getScrollTop()>=2050 && getScrollTop()<=3650)
{
c=c-35;// Position for the second background, it decreases in 35 pixels
d=d-10;// Position for the second background, it decreases in 10 pixels
$('.img_2').css('backgroundPosition', '50% '+c+'px');
$('.bk_1').css('backgroundPosition', '0 '+d+'px');
}
}
if (getScrollTop()==0)// Adjusts the positions values and resets them to zero during a scroll up event
{
a=parseFloat(400);
b=parseFloat(0);
c=parseFloat(400);
d=parseFloat(0);
$('.bk_0').css('backgroundPosition', '0 0');
$('.bk_1').css('backgroundPosition', '0 0');
$('.img_2').css('backgroundPosition', '50% '+400+'px');
$('.img_1').css('backgroundPosition', '50% '+400+'px');
}
scrollTop = $(this).scrollTop();
});
});
function getScrollTop(){ // Verifies the total sum in pixels of the whole page

if(typeof pageYOffset!= 'undefined'){
// Most browsers
return pageYOffset;
}
else{
var B= document.body; //IE 'quirks'
var D= document.documentElement; //IE with doctype
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}

На этом мы закончили работу над эффектом parallax в стиле «Nike», и теперь вы можете проверить работоспособность (которая уже была протестирована во многих современных браузерах, включая IE8 и более свежие версии). Вы можете использовать этот эффект в любом из своих проектов. Спасибо за то, что читаете наши статьи, и не забудьте и дальше следить за обновлениями на сайте! Если вам понравилось это руководство, пожалуйста, расскажите о нем друзьям или прокомментируйте ниже!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: parallax, jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 14629   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 15 декабря 2013 @ 11:01
Написал: Илья — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень полезное руководство...сейчас тема параллакса очень актуальна. Спасибо !, много интересное нашел у вас на сайте.
Комментарий #2: 15 декабря 2013 @ 18:37
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Цитата: Илья
Очень полезное руководство...сейчас тема параллакса очень актуальна. Спасибо !, много интересное нашел у вас на сайте.

Рады, что вам понравилось.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930