Параллакс

Parallax CSS — это оптический эффект смещения видимого положения объекта. Мы видим сдвиг нескольких слоев после какого-то действия. Узнайте как использовать этот эффект для вертикального слайдера без применения JavaScript, только на чистых свойствах CSS3.

Оглавление:
  1. CSS3 Parallax
  2. HTML
  3. CSS

CSS3 Parallax

Демо

к меню ↑

HTML

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

<div class="pss_main"><!— main parallax scrolling slider object —>
 <input class="sel_page_1" id="r_1" type="radio" checked="checked" name="p" /> <!— hidden radios —>
 <input class="sel_page_2" id="r_2" type="radio" name="p" />
 <input class="sel_page_3" id="r_3" type="radio" name="p" />
 <input class="sel_page_4" id="r_4" type="radio" name="p" />
 <label class="pss_contr c1" for="r_1"></label> <!— controls —>
 <label class="pss_contr c2" for="r_2"></label>
 <label class="pss_contr c3" for="r_3"></label>
 <label class="pss_contr c4" for="r_4"></label>
<div class="pss_slides">
<div class="pss_background"></div>
<ul>
<ul><!— slides —></ul>
</ul>
<ul>
	<li><img alt="image01" src="images/image1.png" />
<div>Model DT 770</div></li>
	<li><img alt="image02" src="images/image2.png" />
<div>Model DT 990</div></li>
	<li><img alt="image03" src="images/image3.png" />
<div>Model DT 234</div></li>
	<li><img alt="image04" src="images/image4.png" />
<div>Model DT 880</div></li>
</ul>
</div>
</div>
к меню ↑

CSS

Теперь пришло время определить стили CSS для Parallax. Это общий стиль основного элемента слайдера; 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;
}

Как видите все селекторы checked скрыты, вместо них используем метки. Каждая метка красная кнопка, при наведении курсора мыши метка делает переход с полупрозрачности. Обратите внимание, что по умолчанию все элементы управления (элементы маркировки) скрыты. Мы будем отображать необходимые элементы управления (кнопки вверх и вниз), только по необходимости активного слайда. Наши следующие стили для слайдов (label) и фона объекта.

.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 в зависимости от активного элемента (слайда).