Прокрутка изображений с объемной трансформацией на чистом CSS3

8 июля 2014 | Опубликовано в css | 1 Комментарий »

Сегодня мы создадим интересную прокрутку изображений со стрелками и объемной трансформацией, используя только ранее существующие свойства СSS, а также новые свойства CSS3. Для этого мы используем несколько хитростей CSS.

Демонстрация работы – Скачать исходный код

Готовим HTML

Мы уверены, что понимание основных принципов HTML не создаст проблем для большинства наших читателей, так что мы просто покажем код:

<div id="slider">
<input type="radio" id="button-1" name="controls" />
<input type="radio" id="button-2" name="controls" checked />
<input type="radio" id="button-3" name="controls" />
<input type="radio" id="button-4" name="controls" />
<input type="radio" id="button-5" name="controls" />
<label for="button-1" id="arrow-1">></label>
<label for="button-2" id="arrow-2"<></label>
<label for="button-3" id="arrow-3">></label>
<label for="button-4" id="arrow-4">></label>
<label for="button-5" id="arrow-5">></label>
<div id="slides">
<div>
<span id="image-1">
<span>
<strontg>Hey, you! Get offa my cloud!</strong>
<em>(30 Mar)</em>
</span>
</span>
<span id="image-2">
<span>
<strong>You were always on my mind..</strong>
<em>(2 Jun)</em>
</span>
</span>
<span id="image-3">
<span>
<strong>You know you could have it so much better, if you tried..</strong>
<em>(5 Aug)</em>
</span>
</span>
<span id="image-4">
<span>
<strong>Every single night, I endure the fight..</strong>
<em>(8 Oct)</em>
</span>
</span>
<span id="image-5">
<span>
<strong>Last night these two bouncers and one of them's alright..</strong>
<em>(20 Dec)</em>
</span>
</span>
</div>
</div>
</div>

Работает это довольно просто. У нас есть несколько элементов формы, которые мы спрячем, и метка, которая связана с каждым элементом формы. Мы применяем стили к меткам, чтобы они выглядели как стрелки, и так как они связаны с формой, при нажатии на них будет выбран соответствующий переключатель. После этого мы проверяем, выбран ли соответствующий переключатель в CSS, и передвигаем прокрутку на правильное положение, используя простое относительное позиционирование.

Теги span выше с идентификаторами, такими как image-5 и подобные, — это изображения в прокрутке изображений. Мы можем задать им стили прямо в CSS, чтобы они выглядели, как изображения, или как угодно, как мы хотим. Содержимое внутри, в тегах span класса info, появится, когда пользователь перейдет к соответствующему изображению. Потом мы можем добавить переходы, чтобы все работало плавно.

Для стрелок этой прокрутки мы используем стандартный набор шрифтов и значков Symbolset’s.

CSS

Это наиболее важная часть. Мы используем свойство объемной трансформации, чтобы создать эффект объема, который не поддерживается в предыдущих версиях браузера Opera. В старых браузерах, не поддерживающих свойство объемной трансформации, пользователь увидит обычную прокрутку изображений, без объемных эффектов, это можно изменить при помощи jQuery, если захотите.

Мы используем селектор для соседних элементов, тильду ~, таким образом, чтобы, когда пользователь выберет соответствующий переключатель, было показано правильное изображение. Код, который мы используем, выглядит так:

#slider #button-1:checked ~ #slides > div > span { left: 5% }

Так что, когда пользователь выбирает первую кнопку, вся прокрутка сдвинется на 5% влево, и будет показано правильное изображение. Остальное — довольно простые объемные трансформации и переходы. Вот весь код:

body {
margin: 0;
padding: 0;
background: url('ecailles.png');
font-size: 62.5%;
}

#slider {
display: block;
height: 350px;
width: 100%;
margin: auto;
overflow: hidden;
margin-top: 60px;
position: relative;
}

#slider #slides {
width: 100%;
height: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
position: relative;
}

#slider #slides > div {
list-style: none;
height: 100%;
width: 500%;
position: relative;
left: 0px;
margin: 0;
padding: 0;
overflow: hidden;
/* Задаем объемную перспективу, так как мы используем объемную трансформацию */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 10% 50%;
-moz-perspective-origin: 10% 50%;
perspective-origin: 10% 50%;
}

#slides > div > span {
/* Запускаем переходы */
-webkit-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
-moz-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
-o-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
height: 320px;
width: 10%;
float: left;
border-radius: 5px;
opacity: 1;
overflow: hidden;
display: block;
position: relative;
font-size: 1.6em;
top: 20px;
z-index: 1;
}

/* Не показываем, так что пользователь не увидит, что происходит с переключателями */
#slider input[type=radio] {
display: none;
}

#slider #slides > div > span > img {
margin: auto;
height: 100%;
}

/* Задаем стили для стрелок, чтобы они приятно выглядели */
#slider .arrows {
font-size: 15px;
color: #fff;
position: absolute;
top: 290px;
display: none;
cursor: pointer;
font-family: "SSStandard";
z-index: 9999;
width: 29px;
height: 25px;
border-radius: 32px;
text-align: center;
padding: 7px 0 0 3px;
background: black;
box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px 11px 24px -8px rgba(255,255,255,0.4);
}

#slider .arrows:hover {
box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px -11px 24px -8px rgba(255,255,255,0.4);
}

/* Блоки информации */
#slides .info {
width: 100%;
padding: 20px 20px 25px 20px;
position: relative;
bottom: 120px;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
-webkit-transition: all 1s 0.2s cubic-bezier(1, 0, 0.6, 1);
transition: all 1s 0.2s cubic-bezier(1, 0, 0.6, 1);
color: #fff;
font-weight: bold;
background-color: rgb(30, 30, 30);
box-shadow: 0 0 20px rgba(0,0,0,0.3);
line-height: 30px;
}

#slides .info strong {
border-bottom: 2px solid #fff;
padding: 3px 0;
}

#slides .info em {
font-size: 0.8em;
float: right;
padding-top: 4px;
color: rgba(255,255,255,0.2);
}

/* Это для расположения стрелок */
#button-1:checked ~ #arrow-2, #button-2:checked ~ #arrow-3, #button-3:checked ~ #arrow-4, #button-4:checked ~ #arrow-5 {
right: 27%;
display: block;
}

/* Так как в CSS нет селектора предыдущего объекта, нам нужно выбрать соответствующую стрелку, сдвинуть ее и повернуть на 180 градусов, чтобы она выглядела, как обратная стрелка */
#button-2:checked ~ #arrow-1, #button-3:checked ~ #arrow-2, #button-4:checked ~ #arrow-3, #button-5:checked ~ #arrow-4 {
left: 27%;
display: block;
-webkit-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px -11px 24px -8px rgba(255,255,255,0.4);
}

#button-2:checked ~ #arrow-1:hover, #button-3:checked ~ #arrow-2:hover, #button-4:checked ~ #arrow-3:hover, #button-5:checked ~ #arrow-4:hover {
box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px 11px 24px -8px rgba(255,255,255,0.4);
}

/* Изображения, использованные в прокрутке, не стесняйтесь изменить их */
#image-1 {
background: url('1.jpg');
}

#image-2 {
background: url('2.jpg');
}

#image-3 {
background: url('3.jpg');
}

#image-4 {
background: url('4.jpg');
}

#image-5 {
background: url('5.jpg');
}

/* В следующей части много слов, но это просто расположение изображений с двух сторон от выбранного изображения, чтобы получить интересный объемный эффект */
#slider #button-1:checked ~ #slides > div #image-2, #slider #button-1:checked ~ #slides > div #image-3,
#slider #button-1:checked ~ #slides > div #image-4, #slider #button-1:checked ~ #slides > div #image-5,
#slider #button-2:checked ~ #slides > div #image-3, #slider #button-2:checked ~ #slides > div #image-4,
#slider #button-2:checked ~ #slides > div #image-5, #slider #button-3:checked ~ #slides > div #image-4,
#slider #button-3:checked ~ #slides > div #image-5, #slider #button-4:checked ~ #slides > div #image-5 {
-webkit-transform: rotateY(-10deg) scale(0.8) translateX(-10%);
transform: rotateY(-10deg) scale(0.8) translateX(-10%);
z-index: 0;
}

#slider #button-2:checked ~ #slides > div #image-1, #slider #button-3:checked ~ #slides > div #image-2,
#slider #button-3:checked ~ #slides > div #image-1, #slider #button-4:checked ~ #slides > div #image-3,
#slider #button-4:checked ~ #slides > div #image-2, #slider #button-4:checked ~ #slides > div #image-1,
#slider #button-5:checked ~ #slides > div #image-4, #slider #button-5:checked ~ #slides > div #image-3,
#slider #button-5:checked ~ #slides > div #image-2, #slider #button-5:checked ~ #slides > div #image-1 {
-webkit-transform: rotateY(10deg) scale(0.8) translateX(10%);
transform: rotateY(10deg) scale(0.8) translateX(10%);
z-index: 0;
}

/* Показываем блок информации, когда пользователь выберет изображение */
#slider #button-1:checked ~ #slides > div #image-1 .info,
#slider #button-2:checked ~ #slides > div #image-2 .info,
#slider #button-3:checked ~ #slides > div #image-3 .info,
#slider #button-4:checked ~ #slides > div #image-4 .info,
#slider #button-5:checked ~ #slides > div #image-5 .info {
bottom: 0px;
}

/* И, наконец, передвинуть изображения в нужное положение, когда пользователь нажмет на стрелку, чтобы было выбрано правильное изображение */
#slider #button-1:checked ~ #slides > div > span { left: 5% }
#slider #button-2:checked ~ #slides > div > span { left: -5% }
#slider #button-3:checked ~ #slides > div > span { left: -15% }
#slider #button-4:checked ~ #slides > div > span { left: -25% }
#slider #button-5:checked ~ #slides > div > span { left: -35% }

Заключение

Эта прокрутка работает почти во всех современных браузерах. В предыдущих версиях браузера Opera, не поддерживающих объемные трансформации, прокрутка все равно будет работать, так что это не повлияет на возможность использования, пострадает только внешний вид. Такие прокрутки без Javascript, вероятно, станут более распространены в будущем, особенно учитывая, что они хорошо поддерживаются всеми основными браузерами.

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

Опубликовано в css, июля 8, 2014
Метки: css, верстка, галерея изображений, галерея урок, сss галереи, урок css, урок верстка

�

AlyceBef
22 марта 2017 в 16:03
-5

Комментарий скрыт из-за рейтинга
Как видим, основные компоненты: цеолит, а также стиральная сода и пищевая сода (которые в смеси и будут той самой троной), плюс немного sles и прочего по мелочи. мужские комплекты
На детских изображают известных героев мультфильмов, комиксов, компьютерных игр.
Во-первых, искусственный мех и кожа могут быть самых необычных цветов, оттенков и рисунков.
черный жемчуг Поэтому обязательно проверяйте качество, маркировку и сертификат.

Прокрутка изображений с объемной трансформацией на чистом CSS3

Готовим HTML

CSS

Заключение

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые