Главная > CSS/Style Sheets > Слайдер с параллакс-скроллингом на CSS3

Слайдер с параллакс-скроллингом на CSS3


1 июня 2012, 12:45. Разместил: Design FactoRy
Не замечали ли вы, что в последнее время появляется множество веб-сайтов, в дизайне которых используется параллакс-эффект? Это оптический эффект (различные объекты двигаются с разной скоростью, за счет чего создается эффект трехмерной глубины). И сегодня мы применим этот эффект к вертикальному слайдеру. Мы не будем использовать javascript, а только параметры из чистого кода CSS3.

Слайдер с параллакс-скроллингом на CSS3

Этап 1 – HTML

Давайте рассмотрим HTML-код. У нас здесь будет 4 радио-элемента, 4 ярлыка для них (будут работать в качестве контроллеров), а также 4 слайда (или страницы). В каждом слайде будет изображение и небольшой текст описания. К каждому слайду вы можете добавить больше элементов. Основная идея – спрятать радио-кнопки, и использовать ярлыки для того, чтобы манипулировать радио-элементами. А также мы будем применять различные 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

Теперь пришло время определить стили слайдера. Это будут наши основные стили для основного элемента – слайдера, элементов ввода и ярлыков для них:

.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). Здесь у нас также имеется переход в параметре background-position. Итак, когда мы переключаем слайд, позиция фона также изменяется. Наши слайды представляют собой неупорядоченный список. Эти слайды оформлены переходом только для уровня плотности отображения. Когда мы переключаем слайд, мы изменяем позицию родительского элемента наших слайдов top (UL-объекта). Мы также изменяем позицию (параметра left) текстовых ярлыков. И, последнее свойство заключается в изменении цвета фона для элемента pss_slides в зависимости от выбранного элемента (слайда).

Демо | Скачать архив
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад