Красивый и эффектный слайдер на CSS3
Эффектный слайдер работающий на CSS3 без использования JavaScript.
Слайдер работает в автоматическом режиме смены изображений, с функцией паузы при наведении мыши.
Помимо изображений в слайдер можно ставить что угодно, начиная с обычной текстовой информации, заканчивая IFrame.
Каждый блок можно подписать своим названием.
Простая разметка HTML.
Стили для нашего слайдера.
Минус этого слайдера состоит только в том, что он не будет работать на старых браузерах, не поддерживающих CSS3. А может быть и не минус...
Эффектный слайдер работающий на CSS3 без использования JavaScript.
Слайдер работает в автоматическом режиме смены изображений, с функцией паузы при наведении мыши.
Помимо изображений в слайдер можно ставить что угодно, начиная с обычной текстовой информации, заканчивая IFrame.
Каждый блок можно подписать своим названием.
Простая разметка HTML.
Код: Выделить всё
<div id="slider-shadow">
<div id="slider">
<div id="mask">
<ul>
<li>
<a href="#"><img src="/images/1.png" /></a>
</li>
<li>
<a href="#"><img src="/images/2.png" /></a>
<span><h2>Изображение</h2></span>
</li>
<li>
<iframe src="http://cabinetadmina.ru" width="600" height="200" frameborder="0" scrolling="no"></iframe>
<span><h2>IFrame</h2></span>
</li>
<li>
<a href="#"><img src="/images/3.png" /></a>
</li>
</ul>
</div>
<div id="progress"></div>
<div id="overlay"></div>
<div id="pause"></div>
</div>
</div>
Код: Выделить всё
#slider {
width: 600px;
height: 200px;
margin: 40px auto 0;
overflow: visible;
background-color: #362c30;
border: 10px solid #362c30;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
position: relative;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#mask {
overflow: hidden;
}
#slider:hover {
background-color: #cccccc;
border: 10px solid #cccccc;
-webkit-animation: rotatey 400ms ease-out;
-moz-animation: rotatey 400ms ease-out;
}
#slider:hover #pause {
opacity: 1;
}
#slider:hover #progress {
background-color: rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#pause {
width: 600px;
height: 200px;
position: absolute;
top: 0;
opacity: 0;
background-image: url('/images/paused.png');
background-position: 566px 10px;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#progress {
width: 1px;
height: 1px;
background-color: #ffd000;
-moz-animation: progress 18s infinite;
-webkit-animation: progress 18s infinite;
position: relative;
top: -1px;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#overlay {
width: 600px;
height: 200px;
position: absolute;
top: 0;
background-image: url('/images/overlay.png');
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
opacity: 0.5;
-moz-animation: overlay-fade 18s infinite;
-webkit-animation: overlay-fade 18s infinite;
}
#slider ul {
width: 2400px;
list-style: none;
padding: 0;
margin: 0;
-moz-animation: slide-animation 18s infinite;
-webkit-animation: slide-animation 18s infinite;
position: relative;
left: 0px;
}
#slider li {
display: inline;
width: 600px;
height: 200px;
margin: 0;
padding: 0;
float: left;
position: relative;
background-image: url('/images/loader.gif');
background-position: 50% 50%;
background-repeat: no-repeat;
}
#slider li:last-of-type {
background-color: #362c30;
}
#slider li a {
display: block;
text-decoration: none;
}
#slider li span {
display: block;
width: 560px;
padding: 15px 20px;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(54,44,48,0.6);
border-top: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
}
#slider ul li span h2 {
font-size: 24px;
line-height: 24px;
color: #fff;
font-weight: normal;
font-family: 'Communist-Regular';
text-shadow: 1px 1px 1px #362c30;
}
#slider-shadow {
width: 100%;
height: 260px;
background-image: url('/images/slider-shadow.png');
background-position: center bottom;
background-repeat: no-repeat;
margin: 10px auto 0;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-moz-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
Минус этого слайдера состоит только в том, что он не будет работать на старых браузерах, не поддерживающих CSS3. А может быть и не минус...
Комментарии: 29
На разных браузерах по разному. На гугловском нормально. А на яндевском тот на хроме троится.CabinetAdmin » 3 минуты назад писал(а):Да нет, у меня нормально отображается.
Сменил то я. Вод как он смотрится в яндексе:CabinetAdmin » 1 минуту назад писал(а):зы. Почему width: 225px;, там же ещё бордюр в 10 пикселей на сторону, width: 245px; надо. Попробуй 245, да и высоту можно уменьшить до 155px.
Да хотя бы тот же, что стоит здесь на форуме - http://cabinetadmina.ru/viewtopic.php?f=122&t=3779
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Я видел тот. Нашол другой. Создал тему.CabinetAdmin » Сегодня, 13:52 писал(а):Да хотя бы тот же, что стоит здесь на форуме - viewtopic.php?f=122&t=3779