Skip to content

Новогодняя прокрутка с skrollr.js

В этом уроке мы будем использовать очень хороший плагин skrollr.js от Prinzhorn для создания рождественской открытки, очень даже по «сезону» (зима, на улице идет снег). Этот урок не охватит все возможности skrollr.js, я просто хочу показать Вам, как легко Вы можете добавить клевый эффект прокрутки на вашем сайте.

preview

Шаг 1 — Исходники

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

resources

Шаг 2 — HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Merry Christmas - Merry Scroll</title>
<link rel="stylesheet" href="stylesheets/screen.css" media="screen" title="no title">
</head>
<body>
<div id="skrollr-body">
<div id="wish1" class="centered"></div>
<div id="wish2" class="centered">
<div id="snow" class="centered"></div>
</div>
<div id="ribbon-left" class="ribbon"></div>
<div id="ribbon-right" class="ribbon"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px" >
<path ... />
<path ... />
</svg>
<div id="pattern1" class="centered"></div>
<div id="pattern2" class="centered"></div>
<div id="wish3" class="centered"></div>
</div>
<script src="javascripts/skrollr.js"></script>
<script type="text/javascript">
window.onload = function() {
skrollr.init({
forceHeight: false
});
}
</script>
</body>
</html>

Шаг 3 — CSS

Вы найдете некоторые объяснения в комментариях в коде ниже. Обратите внимание, что мы устанавливаем для слоев z-index в том порядке, в каком они будут видны.

/*---сброс---*/
html, body {padding:0;margin:0;}
/*---выставляем достаточную высоту для прокрутки ---*/
body {overflow:auto; height:7600px; }
/*---все будет происходить в фиксированном окне---*/
#skrollr-body {width:100%; height:100%; position:fixed; }
#skrollr-body div {overflow:hidden; position:absolute; }
/*---центрируем горизонтальные и вертикальные элементы с position: absolute----*/
.centered { top:0; bottom:0; left:0; right:0; margin:auto; }
#wish1 {background: ##E7685D; url('../images/merry1.png') center center no-repeat ; z-index:5;}
/*---Тени окна создадут две зеленые вертикальные линии, которые будут объединены в 40px лентой (см. Шаг 6)---*/
#wish2 {background: #94C3B6 url('../images/merry2.jpg') center bottom no-repeat ; z-index:4; box-shadow: 0 0 0 20px #49675f;}
/*---snow.png содержит хлопья снега на прозрачном фоне (см. Шаг 6)---*/
#snow {width:363px; background:url('../images/snow.png') no-repeat}
#pattern1 { background:url('../images/snow-flakes.png') ; z-index:2; background-attachment:fixed}
.ribbon {background:#49675f; height:40px; top:50%; margin-top:-20px; z-index:3;}
#ribbon-left {left:0}
#ribbon-right {right:0}
/*----центрируем пересечение #ribbon-left и #ribbon-right---*/
svg {position:absolute; z-index:5; left:50%; top:50%; margin-left:-170px; margin-top:-180px}
#pattern2 { background:url('../images/pattern.png'); z-index:1;}
#wish3 {background:#8DBAAE url('../images/merry3.png') no-repeat center center; z-index:6; border-radius:50%;}

Шаг 4 — Используем skrollr.js

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

<div id="wish1" class="centered" data-0="width:100%;" data-1000="width:0%;"></div>

Шаг 5 — Экран 1

screen11

В самом начале страницы мы видим #wish1, который охватывает все окно. Когда мы начинаем прокручивать вниз, ширина будет уменьшается и достигнет 0%. #wish1 мы уже не видим, а видим #wish2, который расположен также как предыдущий, но имеет меньшее значение z-index.

<div id="wish1" class="centered" data-0="width:100%;" data-1000="width:0%;"></div>

Шаг 6 — Экран 2

screen2

Как и в предыдущем шаге ширина уменьшается от 100% до 0%, когда мы ещё прокрутим вниз. Разница в том, что #wish2 не исчезнет полностью, мы увидим его тени, которые образуют вертикальные ленты.

Мы также будем анимировать хлопья снега. Когда мы прокрутим вниз, позиция #snow измениться.

<div id="wish2" class="centered" data-1000="width:100%;" data-2000="width:0%;">
<div id="snow" class="centered" data-1000="top:0px;" data-2000="top:100px"></div>
</div>

Шаг 7 — Экран 3 — Лента

Есть еще три элемента, которые создают пересечение ленты: #ribbon-left и #ribbon-right и SVG элемент, который «рисует» простой бантик на ленте. Когда мы прокрутим вниз, они встретятся в середине экрана.

<div id="ribbon-left" class="ribbon" data-1500="width:0%;" data-2500="width:50%;"/>
<div id="ribbon-right" class="ribbon" data-1500="width:0%;" data-2500="width:50%;"/>
ribbon

Теперь, давайте посмотрим на бант. Для анимации SVG мы будем играть с SVG атрибутами: stroke-dasharray и stroke-dashoffset (здесь вы найдете еще один пример этой техники). Мы поставили stroke-dasharray на 500px — это значит, что мы рисуем нашу ленту пунктирной линией с тире, пробелами и длиной 500px. С этими настройками пунктиров не будет видно вообще. При прокрутке вниз, мы начинаем уменьшать смещение и ленты появляются постепенно.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px">
<path style="fill:none; stroke:#49675f; stroke-width:40px; stroke-dasharray:500px; stroke-dashoffset:0;"
data-2500="stroke-dashoffset:500;" data-4000="stroke-dashoffset:0;"
d="M169,174C123,169-17.5,87.5,36,34S169,174,169,174z"/>
<path style="fill:none; stroke:#49675f; stroke-width:40px; stroke-dasharray:500px; stroke-dashoffset:0;"
data-2500="stroke-dashoffset:500;" data-4000="stroke-dashoffset:0;"
d=" M169,174c46-5,186.5-86.5,133-140S169,174,169,174z"/>
</svg>

Шаг 8 — Узоры

Что здесь происходит? Мы прокрутим вниз и высота слоя со снежинками (#pattern1) уменьшается. Мы начнем видеть #pattern2 — полосатый узор, который располагается ниже (имеет наименьшее значение z-index).

<div id="pattern1" class="centered" data-2500=" height:100%; "data-3500="height:0%;"></div>
<div id="pattern2" class="centered"></div>

Шаг 9 — С Новым годом

Вот что происходит на последнем «экране»:

<div id="wish3" class="centered" data-4000="width:0px;height:0px; "data-6000="width:700px;height:700px;"></div>

А как насчет мобильных и планшетов?

position:fixed не очень хорошо работает на мобильных устройствах, так что мы должны обеспечить альтернативное решение для экранов смартфонов. Мы обнаружим, что пользователь зашел на страницу через смартфон или планшет и перенаправим его на мобильную версию страницы. А к ней будет подключена мобильная версия плагина — skrollr.mobile.min.js

На этом все, спасибо за внимание. С наступающим!

Оригинал статьи: Pepsized