Параллакс

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

Parallax CSS3

Демо

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

HTML

<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;
        -ms-transition:opacity linear 0.3s;
         -o-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;
      -ms-transition:all linear 1.0s;
       -o-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;  
      -ms-transition:all linear 1.5s;
       -o-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;
      -ms-transition:top ease-in 1.0s;
       -o-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;
      -ms-transition:opacity ease-in 1.0s;
       -o-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;
      -ms-transition:left ease-in 1.0s;
       -o-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 в зависимости от активного элемента (слайда).

автор CSS 655
htmlhook.ru | Скрипты для веб-приложений