Сейчас в моде cайты со скроллом на основе CSS анимации, которые реагируют на то, как далеко пользователь прокрутил страницу. В этой статье, мы покажем нашим читателям как легко и просто получить такой результат.
Скролл на основе CSS Animation
В первую очередь, нам нужен jQuery плагин под названием Skrollr. Мы включили его в отдельную JS папку. Как только плагин на месте, мы переходим к использованию HTML5 дата атрибутов для встраивания данных в зависимости от количества пикселей, которые пользователь прокрутил вниз страницы. Для анимации мы просто переходим к CSS свойствам, так что на 0 px у нас может быть top: -30%, и на 2000px мы установим top: 50%. Такое действие передвинет объект от верхней точки в центр страницы на расстоянии в 2000 пикселей.
1. Приступаем к работе
Скачайте источник к себе на рабочий стол и откройте index.html в редакторе кода. В хедере добавьте ссылку, приведенную ниже, которая будет должным образом отображать шрифт в дизайне. Взгляните на body секцию, и вы увидите как четыре комментария разделяют body на четыре раздела.
<link href='//fonts.googleapis.com/css?family=Poiret+One&subset=cyrillic' rel='stylesheet' type='text/css'>
2. Задайте бэкграунд
Перед комментарием для первой секции добавьте код, как показано ниже. Мы используем атрибут данных для HTML5, который хранит положение скролла и то, что мы хотим чтобы произошло. На первых 1400px, ничего не будет происходить на дисплее, а затем мы изменим цвет фона, мы также повторим изменение цвета в других пунктах скролла.
<div id="bg" data-0="background-color:rgb(70,168,189);" data-1400="" data-1900="background-color: rgb(133,60,79)" data-3500="" data-4000="background- color:rgb(60,60,60)" data-4950="" data-5250="background-color:rgb(255,142,73)"></div>
3. Стилизуйте шрифт и бэкграунд
Теперь необходимо вернуться в хедер и добавить следующий код, который будет стилизовать H1 тэг, но более важно, он устанавит размер бэкграунда. Позже, когда мы добавим контент, вы увидите, что по мере прокрутки страницы вниз, цвета будут меняться четыре раза в соответствии с цветами в шаге 2.
<style>
h1{
color: #fff; font-size: 4em;
text-align: center; font-family: 'Poiret One', sans-serif;
}
#bg {
top: 0; left: 0; width: 100%; height: 100%;
}
</style>4. Добавьте контент
Наведите курсор вниз на первый раздел комментариев в body теге. Добавьте код после комментария, как показано ниже. Это отображает часы и позиционирует их на экране. От 1500 до 1700px вниз страницы непрозрачность часов исчезнет. Вы можете увидеть свойство непрозрачности в атрибуте данных.
<div data-0="top:50%; left:65%” data-1500=”opacity:1” data- 1700=”opacity:0”> <img src=”images/clock.png” width=”300” height=”300” alt=”clock”> </div>
5. Часовая стрелка
Часам необходимы стрелки, так что давайте начнем с добавления первой стрелки. Вы сможете увидеть в этом коде, что мы преобразовали свойство вращения (rotation property). Первой добавленой стрелкой будет часовая, так что вы увидите как она перемещается всего на 65 градусов, что составляет около 2,5 часов на циферблате!
<div class=”arm” data-0=”top:50%; left:65%; transform:rotate(0deg);” data-1400=”top:50%; left:65%; transform:rotate(60deg);opacity:1” data-1600=”top:50%; left:65%; transform:rotate (65deg);opacity:0”> <img src=”images/arm2.png” width=”30” height=”300” alt=”clock-hand”> </div>
6. Минутная стрелка
Теперь мы добавим минутную стрелку к нашим часам и на этот раз она будет вращаться гораздо больше, чтобы соответствовать происходящему на часовой стрелке. Вы также сможете заметить, как обе стрелки исчезают на последних 200px. Любое свойство CSS может быть анимированно таким образом.
<div class=”arm” data-0=”top:50%; left:65%; transform:rotate(0deg);” data-1400=”top:50%; left:65%; transform:rotate(720deg);opacity:1” data-1600=”top:50%; left:65%; transform:rotate (790deg);opacity:0”> <img src=”images/arm1.png” width=”30” height=”300” alt=”clock-hand"> </div>
7. Стилизация часов
Теперь мы вернемся обратно в теги стилей в хедере документа. Мы будем стилизовать holder, который содержит графику часов. Здесь мы установим их размер и смещение на половину их ширины и высоты в полях, так чтобы мы контролировали централизированое расположения часов при их анимирование.
.holder{ width: 300px; height: 300px;
margin-left: -150px; margin-top: -150px;
}8. Стилизация стрелок
Теперь добавим CSS для стрелок. Мы снова установливаем ширину, высоту и её смещение, как и в предыдущем шаге. Что еще более важно, это то, что здесь мы устанавливаем позицию преобразования координат в центр DIV элемента, так что мы смогли вращать стрелку вокруг своей центральной точки.
.arm {
width: 30px; height: 300px;
margin-left: -15px; margin-top: -150px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}9. Добавьте текст
При прокрутке страницы вниз вы увидите вращающиеся стрелки часов, прежде чем часы полностью исчезают. Вернитесь к документу и добавьте следующий код в первый раздел комментариев body страницы. Это добавит текст, который будет появляться рядом с нашими часами. Здесь вы увидите как текст выдвигается влево и исчезает.
<div data-0="top:50%; left:35%" data-1350="top:50%; left:35%; opacity:1" data-1650="top:50%; left:-15%;opacity:0"> <h1>Поставьте перед нами<br>Задачу</h1> </ div>
10. Стилизация текста
Вернитесь в тег стилей и добавьте следующий CSS, который будет позиционировать текст и обёртку для следующего раздела анимации. Вы увидите текст слева от часов, а когда документ прокручивается, текст будет соскальзывать влево.
.text1 {
width: 300px; height: 320px;
margin-left: -150px; margin-top: -160px;
}
#cog-wrapper {
width: 400px; height: 400px;
margin-left: -200px; margin-top: -200px;
}11. Добавление держащего DIV
Наш следующий фрагмент кода добавляет бокс (holder), который будет состоять из двух шестеренок. Он появится по правой стороне, когда пользователь прокрутил 1600 пикселей. И он соскальзывает влево после завершения анимации. На следующем этапе, когда мы добавим наши шестеренки, они должны быть помещены перед закрывающем DIV тегом, как показано ниже.
<div id=”cog-wrapper” data-1600=”top:50%; left:130%” data-1900=”top:50%; left:50%” data- 3500=”top:50%; left:50%” data- 3800=” top:50%; left:-130%> </div>
12. Добавление шестеренок
Теперь мы добавим две шестеренки внутри бокса, который мы создали в предыдущем шаге. Убедитесь в том, что код помещается внутрь кода закрывающего тега DIV из предыдущего шага. Шестеренки здесь вращаются с разной скоростью, чтобы отразить их размеры, и вращаются друг против друга.
<div id=”cog-wrapper” data-1600=”top:50%; left:130%” data-1900=”top:50%; left:50%” data- 3500=”top:50%; left:50%” data-3800=”top:50%; left:-130%”> <div id=”cog2” data- 1600=”transform:rotate(0deg);” data-3800=”transform:rotate(360deg);”> <img src=”images/cog2. png” width=”200” height=”200” alt=”cog2”> </div>
13. Размещение первой шестеренки
Добавьте следующий код в раздел CSS в заголовке (head) документа. Этот код стилизует ширину и высоту первой шестеренки и помещает его в оболочку.
#cog1 {
width: 250px; height: 250px;
margin-left: 30px; margin-top: 30px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%; }14. Вторая шестеренка
Добавьте CSS код ко второй шестеренке, которая отличается от первой только шириной и высотой. Теперь сохраните документ и обновите страницу в браузере. Вы увидите, что при прокрутке вниз, винтики влетят на экран справа налево, а затем улетят влево.
#cog2 {
width: 200px; height: 200px;
margin-left: 200px; margin-top: 200px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}15. Текст рядом с шестеренками
Переведите курсор обратно к body и поместите следующий код перед третьим комментарием в коде. Это добавит два текстовых поля на страницу, выше и ниже шестеренок на экране. Эти текстовые поля анимируют верхнюю и нижнюю части документа.
<div class=”text2” data-1550=”top:-20%; left: 50%” data-1750=”top:25%; left: 50%” data-3600=”” data-3800=”top:-20%; left: 50%”> <h1>Мы применим</h1></div> <div class=”text2” data-1550=”top:120%; left: 50%” data-1750=”top:80%; left: 50%” data-3600=”” data-3800=”top:120%; left: 50%”><h1>Наши знания</h1> </div>
16. CSS для текста
Перейдите в CSS раздел кода и добавьте CSS. Обновите страницу и прокрутите вниз, чтобы увидеть, как текст передвигается в документе вместе с шестеренками.
.text2 {
width: 50%; height: 200px;
margin-left: -25%; margin-top: -100px;
}17. Лампочка гори!
Переместите курсор на после третьего комментария в body документа. Добавьте код ниже, который “включит” лампочку как только исчезнут шестеренки с экрана. Лампочка “гаснет”, когда пользователь пролистает 5150px высоты страницы.
<div class=”holder” data-3900=”opacity:0;” data-4000=”opacity:1;” data-4950=”top:50%; left:65%” data-5150=”top:50%; left:125%; “> <img src=”images/bulb.png” width=”300” height=”340” alt=”light bulb”></div>
18. Поучительные слова
Непосредственно под последним кодом, мы добавляем код показанный здесь. Это добавит текст, который будет отображаться рядом с лампочкой. Этот текст появляется с верхней части, делает паузы, пока пользователь не прокрутил до 4950px, затем уходит по левой стороне страницы. ***Сохраните документ и обновите браузер, чтобы увидеть его в действии***
<div class=”text1” data-3800=”top:120%; left:35%” data-4000=”top:50%; left:35%;” data-4950=”opacity:1;” data-5150=”top:50%; left:-10%; opacity:0”> <h1>И Решим<br>ее<br>креативно!</h1></div>
19. Финальный сегмент
Теперь мы готовы перейти к заключительному отрезку в анимации, так что поместите курсор после четвертого комментария в body кода и добавьте div, как показано ниже. Это выдвинет изображение дома на экран, с левой стороны. Так как это окончательная анимация, нет никакой необходимости анимировать этот контент за пределы экрана.
<div class=”holder” data-4950=”opacity:0; top:50%; left:-15%;” data-5250=”opacity:1; top:50%; left:35%;”> <img src=”images/home.png” width=”300” height=”300” alt=”home”></div>
20. Почти готово
Как только дом оказался на экране, мы позволим пользователю прокрутить ещё 300px вниз. Только затем мы выдвинем изображение галочки поверх, что будет обозначать завершение. Добавьте код показанный ниже, который анимирует галочку появляющуюся сверху и позиционируя её прямо над значком дома.
<div class=”holder” data-5550=”opacity:0; top:0%; left:35%;” data-5850=”opacity:1; top:50%; left:35%;”> <img src=”images/tick.png” width=”300” height=”300” alt=”tick”> </div>
21. Создание дома и заключительные слова
Ровно до того, как галочка будет анимироваться вниз по экрану на дом, нам нужно добавить какой-то текст рядом с домом, чтобы придать ему контекста. Добавьте код, показанный ниже:
<div class="text1" data-5050="top:20%; left:65%; opacity:0" data-5350="top:40%; left:65%; opacity:1"> <h1>Мы - <br>источник</h1></div> <div class="text1" data-5750="top:80%; left:65%; opacity:0" data-6050="top:60%; left:65%; opacity:1"> <h1>Инновационных<br>идей!</h1></div>
Ура!
Теперь вы можете обновить страницу и просмотреть свое творчество от начала до конца, во всей красе.
Высоких конверсий!
