Разве вы не заметили, что в сети появилось много сайтов с эффектом параллакса? Сегодня мы будем применять этот эффект для вертикального слайдера. Для этого мы не станем использовать JavaScript, только чистый CSS3.

Перед началом выполнения урока, рекомендуем повторить селекторы атрибутов
Смотрите демонстрацию

Шаг 1. HTML

Посмотрите на нашу HTML- разметку. У нас есть четыре переключателя с назначенными идентификаторами и классами, а также четыре слайда (или страницы). Каждый слайд имеет собственное изображение и текст описания. Вы можете добавить больше элементов на своё усмотрение. Основная идея — спрятать радио-кнопки, и использовать эти метки, чтобы установить статус '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

Теперь пришло время добавить стили:

.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 element). Для свойства background-position установлены переходы (transition). Поэтому, когда мы меняем слайд, положение фона тоже меняется. Наши слайды имеют включены в неупорядоченный список. Когда мы меняем слайд, меняется верхнее положение родителей наших слайдов (UL-объекта). Мы будем также изменить положение (слева) для текстовых меток. И последнее, мы будем менять цвет фона «pss_slides» в зависимости от выбранного элемента(slide).
Смотрите демо
Автор — script-tutorials

Перевод-дежурка



Комментарии