Как создавался сайт StartupGiraffe.

Перевод статьи:  Building the StartupGiraffe website.
Автор:  William Lerner.

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

Startup Giraffe

Нашей основной целью было создание забавного адаптивного сайта, который бы представлял наш бренд. Как только партнеры из Barrel NY, к которым мы обратились с просьбой создания графического дизайна для сайта согласились, мы поняли, что с нашей стороны также должно быть реализовано несколько оригинальных трюков. Мы сообщили им, что на самом деле хотели бы чтобы одним из элементов дизайна был высокий жираф, но не могли понять, как реализовать эту идею на практике пока не получили результат работы дизайнеров, который состоял из следующих элементов: в фоновой области находились образованные различными углами полигоны разных цветов и форм, а на переднем плане были всевозможные элементы, которые отлично подходят для создания сайта с эффектом параллакса… и там мы увидели того самого огромного жирафа.

Стоит также отметить, что нашей задачей была реализация идеи без злоупотребления JavaScript функционалом, что, как правило, приводит к проблемам производительности сайта и серьезно раздражает пользователя в процессе работы. В конце концов, мы решили отказаться от идеи создания параллаксного сайта в пользу использования эффекта «растущего жирафа».

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

Структура сайта

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

<section id="background-wrapper">
<!—ПОЛИГОНЫ ФОНА! —>
</section>
<section id="giraffe-wrapper">
<!—ОДИН ОГРОМНЫЙ ЖИРАФ —>
</section>
<section id="content-wrapper">
<!— ЛОГОТИП, ПУБЛИКАЦИИ, ФОТО, СЛАЙДЫ и т.д. —>
</section>

В нашем демонстрационном примере фон не используется поскольку он не имеет принципиально важного значения при рассмотрении данного вопроса.

Эффект вырастающего жирафа.

В принципе, нашей целью была фиксация логотипа, содержащего надпись Startup Giraffe на месте пока жираф «вырастает» и далее, при достижении определенной точки, его «освобождение» и включение в общий поток документа. И поскольку данная конструкция предусматривает то, что жираф начинает «расти», как только пользователь начинает прокручивать окно браузера, то нос жирафа изначально должен находиться сразу же за так называемым «сгибом», то есть нижней гранью видимой области окна браузера, независимо от высоты экрана используемого устройства.

Существует множество способов реализации такой конструкции (и мы, собственно, будем рады любым предложениям), но наш выбор пал на библиотеку jQuery waypoints, которую мы используем как средство определения событий, связанных с прокруткой видимой области окна и привязки к ним требуемых действий.

Для того, чтобы гарантировать что при прокрутке жираф, увеличиваясь в размере будет визуально находится под логотипом, мы помещаем логотип в элемент-обертку с фиксированным позиционированием (position: fixed), который в свою очередь находится в разделе контента (секция content-wrapper). Раздел, содержащий изображение жирафа и раздел контента реализуются с помощью абсолютно позиционированных (position: absolute) родственных элементов одного уровня.

<section id="giraffe-wrapper">
<img id="giraffe" src="giraffe.png" />
</section>
<section id="content-wrapper">
<section id="first-content">
<div id="big-logo-wrapper">
<img id="big-logo" src="sg_logo_large.png" />
</div>
</section>
</section>
body {
background-color: #000;
}
#content-wrapper, #giraffe-wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
#first-content {
position: relative;
}
#big-logo-wrapper {
position:fixed;
top: 250px;
width: 100%;
max-width: 1920px;
}
#big-logo {
width:465px; height:231px;
display:block; margin:0 auto;
}
#giraffe {
position: relative;
left: 100px;
height: 3200px;
}

JavaScript

Далее нам необходимо позаботиться о размещении жирафа и логотипа сайта. Для позиционирования изображения жирафа непосредственно под нижней кромкой видимой области (за «изгибом») мы используем JavaScript. Затем устанавливаем высоту первого раздела контента (секция first-content) равной высоте окна браузера плюс количество пикселей, представляющих высоту области, которую по нашей задумке жираф должен пройти (то есть подняться на эту высоту) до тех пор, пока логотип будет зафиксирован.

$(function() {
var windowHeight = $(window).height(),
giraffe = $("#giraffe"),
firstHeight = windowHeight + 380,
firstContent = $("#first-content");
giraffe.css("top", windowHeight + "px");
firstContent.css("height", firstHeight + "px")
});

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

Используемый нами плагин waypoints позволяет привязывать необходимую нам функцию к событиям попадания определенного DOM элемента в область видимости в процессе прокрутке окна браузера пользователем. Он также позволяет нам определять направление прокрутки. Для назначения или удаления классов, которые меняют значение позиционирующего свойства (position) с fixed на absolute и наоборот мы используем события up и down.

Мы также используем свойство offset функции waypoint() для смены положения точки waypoint (*waypoints – маршрутные точки при скроллинге, значения которых используются для управления этим процессом) с помощью целочисленного значения необходимого количества пикселей. Поскольку применение класса, устанавливающего абсолютное позиционирование логотипа (когда он прокручивается), приводит к смещению логотипа в нижнюю часть его элемента-родителя, то для погашения такого эффекта мы задаем явное смещение offset логотипу, равное высоте изображения логотипа плюс расстояние до него от верхней границы сайта и минус полная высота элемента div, представляющего первую часть контента first-content (которую мы устанавливаем в обработчике события окончания загрузки страницы load).

var logo = $('#big-logo-wrapper');
firstContent.waypoint(
function( direction) {
if ( direction === 'down' ) {
logo.addClass('first-scroll');
} else {
logo.removeClass('first-scroll');
}
},
{
offset: logo.height() + (parseInt(logo.css("top"))) — firstHeight
}
);

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

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *