Параллакс-скроллинг — фантастический новый тренд в веб-дизайне, который, при правильном использовании, позволяет достичь «вау-эффекта». Суть его в том, что фон и другие элементы веб-страницы двигаются с разной скоростью при прокрутке. Этот эффект создает иллюзию глубины, вовлекает посетителя во время навигации по сайту. Это довольно мило, и делает ваш сайт гораздо интереснее!
Но важно не переусердствовать – иначе пользователя такой прием может, наоборот, оттолкнуть, сделать навигацию сложной и непонятной. Хитрость в том, чтобы использовать этот прием очень аккуратно. При правильном использовании параллакс-скроллинг может создать красивую историю, которая развертывается четко и аккуратно. Это дает дизайнерам неограниченный контроль над потоком пользовательского опыта, делает веб-страницы интерактивными и привлекательными.
Один возможный недостаток использования этого эффекта – долгая загрузка с мобильного телефона. Такие страницы слишком тяжелы для мобильных устройств, и если вы планируете создать дизайн для них – откажитесь параллакса.
К преимуществам параллакс-скроллинга стоит отнести:
- Удерживает интерес пользователя;
- Запоминается надолго;
- Позволяет более четко передавать сообщения;
- Дает возможность разместить всю нужную информацию на одной странице;
- Хорошо работает с другими модными трендами: большими изображениями и крупными шрифтами.
Сегодня Freelance.Today научит вас делать вертикальный слайдер с эффектом параллакс-прокрутки c помощью CSS3.
Такой прием можно использовать на лендингах, товарных страницах – позволит показать вещицу со всех сторон, и расписать ее преимущества, или продемонстрировать линейку товара.
Мы не будем использовать JavaScript, только чистые CSS3 свойства.
Как выглядит конечный результат
Приступим :)
Шаг 1. HTML
Посмотрите на HTML-код. Есть четыре тега <input> с атрибутом type и элементом формы radio, четыре <label> для них (выступают в качестве контролеров), а также четыре слайда (или страницы). Каждый слайд имеет собственное изображение, а также некоторое текстовое описание. Вы можете добавить больше элементов для каждого слайда – еще картинки или текст. Основная идея — скрыть кнопки, заданные переключателем radio, и использовать эти метки для того, чтобы установить статус «Включено» (“checked”) для этих элементов. Затем к каждому включенному элементу будем применять различные свойства CSS.
<div class=«pss_main»> <!-- main parallax scrolling slider object -->
<input id=«r_1» type=«radio» name=«p» class=«sel_page_1» checked=«checked» /> <!-- hidden radios -->
<input id=«r_2» type=«radio» name=«p» class=«sel_page_2» />
<input id=«r_3» type=«radio» name=«p» class=«sel_page_3» />
<input id=«r_4» type=«radio» name=«p» class=«sel_page_4» />
<label for=«r_1» class=«pss_contr c1»></label> <!-- controls -->
<label for=«r_2» class=«pss_contr c2»></label>
<label for=«r_3» class=«pss_contr c3»></label>
<label for=«r_4» class=«pss_contr c4»></label>
<div class=«pss_slides»>
<div class=«pss_background»></div>
<ul> <!-- slides -->
<li><img src=«images/image1.png» alt=«image01» />
<div>Model DT 770</div>
</li>
<li><img src=«images/image2.png» alt=«image02» />
<div>Model DT 990</div>
</li>
<li><img src=«images/image3.png» alt=«image03» />
<div>Model DT 234</div>
</li>
<li><img src=«images/image4.png» alt=«image04» />
<div>Model DT 880</div>
</li>
</ul>
</div>
</div>
Шаг 2. CSS
Теперь пришло время определить стили для нашего слайдера. Это общие стили для нашего главного элемента, тегов <input>, и их меток (<label>):
.pss_main {
height:700px;
position:relative;
width:100%;
}
.pss_main input {
display:none;
}
.pss_contr {
background:#E0371E url(../images/up.png) no-repeat center center;
cursor:pointer;
display:none;
height:70px;
left:50%;
opacity:0.3;
position:absolute;
top:5%;
width:70px;
z-index:2;
/* css3 transition */
-webkit-transition:opacity linear 0.3s;
-moz-transition:opacity linear 0.3s;
-o-transition:opacity linear 0.3s;
-ms-transition:opacity linear 0.3s;
transition:opacity linear 0.3s;
border-radius:50% 50% 50% 50%;
box-shadow:0 1px 2px #AF2C19 inset;
}
.pss_contr:hover {
opacity:1;
}
.sel_page_1:checked ~ .pss_contr.c2, .sel_page_2:checked ~ .pss_contr.c3,
.sel_page_3:checked ~ .pss_contr.c4 {
background-image:url(../images/down.png);
display:block;
top:85%;
}
.sel_page_2:checked ~ .pss_contr.c1, .sel_page_3:checked ~ .pss_contr.c2,
.sel_page_4:checked ~ .pss_contr.c3 {
background-image:url(../images/up.png);
display:block;
}
Как вы можете видеть — все чекбоксы скрыты. Нам не нужно их показывать. Вместо этого мы будем использовать метки. Каждая метка — это красный круг. Он меняет свой стиль с прозрачного на непрозрачный при наведении курсора мыши. Причем, обратите внимание, что по умолчанию все элементы управления скрыты. Мы будем отображать необходимые элементы управления (кнопки вверх и вниз) только в соответствии с необходимостью активировать слайд. Следующие стили — для слайдов (с ярлыками) и для фона объекта.
.pss_slides {
height:100%;
overflow:hidden;
position:relative;
}
.pss_background {
background:url(../images/bg.png) no-repeat scroll 0 0;
height:100%;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:100%;
/* css3 background-size */
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover;
}
.pss_main input:checked ~ .pss_slides {
/* css3 transition */
-webkit-transition:all linear 1.0s;
-moz-transition:all linear 1.0s;
-o-transition:all linear 1.0s;
-ms-transition:all linear 1.0s;
transition:all linear 1.0s;
}
.sel_page_1:checked ~ .pss_slides {
background-color:#CCCCCC;
}
.sel_page_2:checked ~ .pss_slides {
background-color:#003366;
}
.sel_page_3:checked ~ .pss_slides {
background-color:#FFFFFF;
}
.sel_page_4:checked ~ .pss_slides {
background-color:#CCCC99;
}
.pss_main input:checked ~ .pss_slides .pss_background {
/* css3 transition */
-webkit-transition:all linear 1.5s;
-moz-transition:all linear 1.5s;
-o-transition:all linear 1.5s;
-ms-transition:all linear 1.5s;
transition:all linear 1.5s;
}
.sel_page_1:checked ~ .pss_slides .pss_background {
background-position:0 0;
}
.sel_page_2:checked ~ .pss_slides .pss_background {
background-position:0 -500px;
}
.sel_page_3:checked ~ .pss_slides .pss_background {
background-position:0 -1000px;
}
.sel_page_4:checked ~ .pss_slides .pss_background {
background-position:0 -1500px;
}
.pss_slides ul {
height:100%;
list-style:none;
position:relative;
top:0;
/* css3 transition */
-webkit-transition:top ease-in 1.0s;
-moz-transition:top ease-in 1.0s;
-o-transition:top ease-in 1.0s;
-ms-transition:top ease-in 1.0s;
transition:top ease-in 1.0s;
}
.pss_slides ul li {
height:100%;
opacity:0.1;
position:relative;
text-align:center;
/* css3 transition */
-webkit-transition:opacity ease-in 1.0s;
-moz-transition:opacity ease-in 1.0s;
-o-transition:opacity ease-in 1.0s;
-ms-transition:opacity ease-in 1.0s;
transition:opacity ease-in 1.0s;
}
.sel_page_1:checked ~ .pss_slides ul li:first-child,
.sel_page_2:checked ~ .pss_slides ul li:nth-child(2),
.sel_page_3:checked ~ .pss_slides ul li:nth-child(3),
.sel_page_4:checked ~ .pss_slides ul li:nth-child(4) {
opacity:1;
}
.pss_slides ul li img{
display:block;
margin:0 auto;
padding:40px;
}
.pss_slides ul li div{
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:-20%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;
/* css3 transition */
-webkit-transition:left ease-in 1.0s;
-moz-transition:left ease-in 1.0s;
-o-transition:left ease-in 1.0s;
-ms-transition:left ease-in 1.0s;
transition:left ease-in 1.0s;
}
.sel_page_1:checked ~ .pss_slides ul {
top:0;
}
.sel_page_2:checked ~ .pss_slides ul {
top:-100%;
}
.sel_page_3:checked ~ .pss_slides ul {
top:-200%;
}
.sel_page_4:checked ~ .pss_slides ul {
top:-300%;
}
.sel_page_1:checked ~ .pss_slides ul li:first-child div,
.sel_page_2:checked ~ .pss_slides ul li:nth-child(2) div,
.sel_page_3:checked ~ .pss_slides ul li:nth-child(3) div,
.sel_page_4:checked ~ .pss_slides ul li:nth-child(4) div {
left:10%;
}
Таким образом, мы можем видеть здесь наш основной фон с абсолютной позиции (pss_background). У него есть переход при смене позиции. Когда мы изменим слайд, положение фона изменяется тоже. Слайды представляют собой неупорядоченный список. Если меняется слайд, меняется положение текстовых меток. И последняя особенность — меняется цвет фона, в зависимости от выбранного элемента (слайда).
Вот таким простым способом мы создали вертикальный слайдер с эффектом параллакса, используя только CSS3.
Надеемся, вам пригодится этот урок.
Удачи!
0 комментариев