[вёрстка] Делаем для сайта слайдер на CSS. Часть 4. Красивый слайдер с прокруткой.
В предыдущей статье мы остановились на том что сделали симпатичный слайдер с прокруткой. В этой статье я покажу доработанный вариант этого слайдера, имеющий большее разнообразие эффектов анимации.
Каждый кадр слайдера я разделил на два слоя. Нижний слой содержит изображение и анимируется одновременно прокруткой и затуханием.
Верхний слой содержит текстовую подпись кадра. При смене кадра он анимируется плавными затуханием и проявлением.
Я вынес стрелки навигации за пределы кадра, чтобы они не мешали просмотру содержимого кадра. При переходе на первый и последний кадр стрелки «назад» и «вперёд» не исчезают мгновенно, а также затухают плавно.
Этот слайдер имеет ограничение: фон страницы сайта должен быть однотонным. (В этом примере — белым. Но отредактировав стили можно использовать слайдер с любым другим одноцветным фоном.)
Вот что у меня получилось:
Код слайдера:
<style>
.sliderD {
width: 400px;
height: 250px;
position: relative;
text-align: center;
margin: 28px auto 20px auto;
z-index: 0;
}
.sliderD > div:first-child {
width: 100%;
height: 100%;
border: 8px solid #fff;
box-shadow: 1px 1px 4px #666;
border-radius: 5px;
position: absolute;
top: -8px;
left: -8px;
z-index: 30;
}
.sliderD:before {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 20;
top: 0px;
right: 100%;
background: -moz-linear-gradient(left, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(40%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); /* W3C */
}
.sliderD:after {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 20;
top: 0px;
left: 100%;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%); /* W3C */
}
.sliderD > input {
display: none;
}
.sliderD > input + label,
.sliderD > input + label + label {
display: block;
width: 50px;
height: 50px;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s ease-out 0s, visibility 0s 1s;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
.sliderD > input + label {
right: 105%;
background: url('https://lh3.googleusercontent.com/-tacAA4lVYgc/VeVDqFrDRRI/AAAAAAAAAT4/RBongekAUqI/s800-Ic42/prev.png')
}
.sliderD > input + label + label {
left: 105%;
background: url('https://lh3.googleusercontent.com/-gy6RMZnCdAc/VeVDqJF1S5I/AAAAAAAAAT0/D4nN8T9RGro/s800-Ic42/next.png')
}
.sliderD > input:checked + label,
.sliderD > input:checked + label + label {
visibility: visible;
opacity: 0.4;
transition: opacity 0.8s ease-out 0s, visibility 0s 0s;
}
.sliderD > input:checked + label:hover,
.sliderD > input:checked + label + label:hover {
opacity: 0.6;
}
.sliderD > label:first-of-type,
.sliderD > label:last-of-type {
visibility: hidden !important;
opacity: 0 !important;
}
.sliderD > div {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
z-index: 0;
width: 1000%;
text-align: left;
transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}
.sliderD > input:nth-of-type(2):checked ~ div { left: -100%; }
.sliderD > input:nth-of-type(3):checked ~ div { left: -200%; }
.sliderD > input:nth-of-type(4):checked ~ div { left: -300%; }
.sliderD > input:nth-of-type(5):checked ~ div { left: -400%; }
.sliderD > input:nth-of-type(6):checked ~ div { left: -500%; }
.sliderD > input:nth-of-type(7):checked ~ div { left: -600%; }
.sliderD > input:nth-of-type(8):checked ~ div { left: -700%; }
.sliderD > input:nth-of-type(9):checked ~ div { left: -800%; }
.sliderD > input:nth-of-type(10):checked ~ div { left: -900%; }
.sliderD > div > div {
display: inline-block;
position: relative;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease-out 0.5s, visibility 0.1s 1s;
}
.sliderD > input:nth-of-type(1):checked ~ div > div:nth-of-type(1),
.sliderD > input:nth-of-type(2):checked ~ div > div:nth-of-type(2),
.sliderD > input:nth-of-type(3):checked ~ div > div:nth-of-type(3),
.sliderD > input:nth-of-type(4):checked ~ div > div:nth-of-type(4),
.sliderD > input:nth-of-type(5):checked ~ div > div:nth-of-type(5),
.sliderD > input:nth-of-type(6):checked ~ div > div:nth-of-type(6),
.sliderD > input:nth-of-type(7):checked ~ div > div:nth-of-type(7),
.sliderD > input:nth-of-type(8):checked ~ div > div:nth-of-type(8),
.sliderD > input:nth-of-type(8):checked ~ div > div:nth-of-type(9),
.sliderD > input:nth-of-type(10):checked ~ div > div:nth-of-type(10) {
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease-out 0.1s, visibility 0.1s ease-out 0s;
}
.sliderD > div + div {
position: absolute;
width: auto;
height: auto;
top: 0px;
left: 0px !important;
right: 0px;
bottom: 0px;
z-index: 40;
}
.sliderD > div + div > div {
position: absolute;
width: auto;
height: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease-out 0.0s, visibility 0.1s ease-out 1s;
}
.sliderD > input:nth-of-type(1):checked ~ div + div > div:nth-of-type(1),
.sliderD > input:nth-of-type(2):checked ~ div + div > div:nth-of-type(2),
.sliderD > input:nth-of-type(3):checked ~ div + div > div:nth-of-type(3),
.sliderD > input:nth-of-type(4):checked ~ div + div > div:nth-of-type(4),
.sliderD > input:nth-of-type(5):checked ~ div + div > div:nth-of-type(5),
.sliderD > input:nth-of-type(6):checked ~ div + div > div:nth-of-type(6),
.sliderD > input:nth-of-type(7):checked ~ div + div > div:nth-of-type(7),
.sliderD > input:nth-of-type(8):checked ~ div + div > div:nth-of-type(8),
.sliderD > input:nth-of-type(8):checked ~ div + div > div:nth-of-type(9),
.sliderD > input:nth-of-type(10):checked ~ div + div > div:nth-of-type(10) {
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease-out 0.9s, visibility 0.1s ease-out 0s;
}
.sliderD > div + div > div > p {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px #000;
}
</style>
<div style='width: 100%; overflow: hidden;'>
<div class='sliderD'>
<div></div>
<input type="radio" name="slider1" id="slider1_1" checked="checked">
<label for="slider1_4"></label>
<label for="slider1_2"></label>
<input type="radio" name="slider1" id="slider1_2">
<label for="slider1_1"></label>
<label for="slider1_3"></label>
<input type="radio" name="slider1" id="slider1_3">
<label for="slider1_2"></label>
<label for="slider1_4"></label>
<input type="radio" name="slider1" id="slider1_4">
<label for="slider1_3"></label>
<label for="slider1_1"></label>
<div>
<div>
<img src='https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s400-Ic42/00099_manaisland_1920x1200.jpg' alt=''>
</div><div>
<img src='https://lh3.googleusercontent.com/-aafAKIoTkT4/VePihWk2BHI/AAAAAAAAATA/zQVtiYD_eDc/s400-Ic42/00201_lakejipe_1920x1200.jpg' alt=''>
</div><div>
<img src='https://lh3.googleusercontent.com/-ikbDMRhLc_I/VePkT4XLFtI/AAAAAAAAATg/qaHqQk89RAw/s400-Ic42/00744_laclahachesunset_1920x1200.jpg' alt=''>
</div><div>
<img src='https://lh3.googleusercontent.com/-BLXeHJNyOqw/VePimp_e_wI/AAAAAAAAATQ/BVw_9LFehyU/s400-Ic42/00442_pyrenees_1920x1200.jpg' alt=''>
</div>
</div>
<div>
<div>
<p>Восход над островом</p>
</div><div>
<p>Озёрный край</p>
</div><div>
<p>Закатная синева</p>
</div><div>
<p>Сельский пейзаж</p>
</div>
</div>
</div>
</div>
Отправить комментарий