Lecaw

Учимся создавать Web-сайты

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

May 18, 2012
CSS
367hits

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

ДЕМО Исходные файлы

 

 

Шаг 1. HTML

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

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

ДЕМО Исходные файлы

Дополнительная информация

RATTING:
(0 голосов)

Медиа