Слайдер прокрутки с эффектом CSS параллакса

Вы должно быть заметили, что в последнее время появилось много сайтов с эффектом CSS параллакса? В основном они устроены как, несколько слоев которые смещаются при помощи некоторого действия. И сегодня, мы применим этот эффект для вертикального слайдера. Мы не будем использовать JavaScript, только чистый CSS3.

Сложность

Шаг 1. HTML разметка

Взгляните на  HTML разметку которую я подготовил. Есть четыре элемента radio, четыре контролера для них, а также четыре слайда (Создание слайд шоу). Каждый слайд имеет собственное изображение, текст, описание.  Здесь вы можете добавить свои элементы для каждого слайда. Основная идея - спрятать радио-кнопки, и использовать эти метки, чтобы установить положение 'checked' статусу радиоэлементов.

<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

Теперь пришло время определить стили для 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). При переходе на следующий слайд, меняется положение  фона. Слайды это неупорядоченный список. Для слайдов установлен переход непрозрачности. Когда мы меняем слайд, будем менять верхнее положение предыдущих слайдов (UL объекта). И последнее, поменяем цвет фона pss_slides в зависимости от выбранного слайда.

Перевод статьи CSS3 Parallax scrolling slider

Тэги: transitionsliderparallax

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.