—»     —»   Слайдер с параллакс-скроллингом на CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

Слайдер с параллакс-скроллингом на CSS3

Не замечали ли вы, что в последнее время появляется множество веб-сайтов, в дизайне которых используется параллакс-эффект? Это оптический эффект (различные объекты двигаются с разной скоростью, за счет чего создается эффект трехмерной глубины). И сегодня мы применим этот эффект к вертикальному слайдеру. Мы не будем использовать javascript, а только параметры из чистого кода CSS3.

Слайдер с параллакс-скроллингом на CSS3

Этап 1 – HTML

Давайте рассмотрим HTML-код. У нас здесь будет 4 радио-элемента, 4 ярлыка для них (будут работать в качестве контроллеров), а также 4 слайда (или страницы). В каждом слайде будет изображение и небольшой текст описания. К каждому слайду вы можете добавить больше элементов. Основная идея – спрятать радио-кнопки, и использовать ярлыки для того, чтобы манипулировать радио-элементами. А также мы будем применять различные 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). Здесь у нас также имеется переход в параметре background-position. Итак, когда мы переключаем слайд, позиция фона также изменяется. Наши слайды представляют собой неупорядоченный список. Эти слайды оформлены переходом только для уровня плотности отображения. Когда мы переключаем слайд, мы изменяем позицию родительского элемента наших слайдов top (UL-объекта). Мы также изменяем позицию (параметра left) текстовых ярлыков. И, последнее свойство заключается в изменении цвета фона для элемента pss_slides в зависимости от выбранного элемента (слайда).

Демо | Скачать архив
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: parallax, CSS
Опубликовал Design FactoRy   Прочитано (раз): 12993   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031