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

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

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

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

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

<section id="background-wrapper">
<!-- Формы! -->
</section>
</section id="giraffe-wrapper">
<!-- Очень высокий жираф -->
</section>
<section id="content-wrapper">
<!-- Логотип, копия, фотографии, ползунки и т.п. -->
</section>

Для этого примера мы пропустим контейнер для фона, потому что там нет ничего интересного.

Эффект «растущего жирафа»

Основной целью было закрепить логотип «StartupGiraffe» на месте, пока жираф поднимается, затем отпустить логотип в нормальный поток страницы в определенный момент. Так как жираф должен начать подниматься, как только пользователь начнет прокручивать страницу, его нос должен быть чуть ниже конца страницы, независимо от того, какая высота у экрана.

Это можно сделать разными способами, но было решено использовать jQuery.waypoints для обнаружения и обработки события прокрутки.

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

HTML

<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>

CSS

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, чтобы расположить жирафа чуть ниже конца страницы. Затем установили высоту первой секции равной высоте окна плюс количество пикселей, на которое мы хотим показать жирафа перед тем, как позволить логотипу прокрутиться.

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

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

Плагин waypoints позволяет нам вызвать функцию, когда пользователь прокручивает страницу до определенного блока. Он также позволит нам определить, в каком направлении пользователь прокручивает страницу. Мы использовали события «вверх» и «вниз», чтобы добавить или удалить класс, который переключает свойство положения логотипа с фиксированного на абсолютное.

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

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 пикселей вверх.

Автор урока William Lerner

Перевод — Дежурка

Смотрите также:

• Создание плоских «хлебных крошек» с использованием CSS
• Создание эффекта глянцевой фотографии при помощи CSS3
• Адаптивный веб-дизайн с использованием CSS3