Минимализм и эффект объемной трансформации совместно шагают по просторам современного веб-дизайна. Красочное сочетание этих эффектов позволяет добавить изюминку в дизайн сайта, а это плодотворно сказывается на узнаваемости ресурса. Успешность сайта кроется в удобстве и простоте, кроме этого не забывайте о мелочах. В данном уроке мы рассмотрим процесс построения весьма простого слайдера, но в нем будет небольшой нюанс, он будет объемный, в сочетании с простотой дизайна мы получаем весьма удачную смесь слайдера.
ДЕМО
У нас будет автоматический слайдер, оформленный тремя изображения и серой рамкой, чтобы не позволить изображениям сливаться с фоном, и так, давайте посмотрим, как у нас это получилось.
Шаг 1. HTML
Как вы уже догадались, что разметка у нас не будет чем-то гениальным, дело в том, что у нас будет три изображения, заключенные в класс, кроме этого нам необходимо установить кнопки навигации и радио-кнопки, которые будут выполнять две функции одна из которых- быстрая навигация, а вторая это информер о количестве слайдов.
<div class="slider"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3" alt=""> <div class="buttons"> <a href="#" class="prev"></a> <a href="#" class="next"></a> </div> <span class="nav"></span> </div>
По желанию количество слайдов с легкостью увеличивается, при этом быстрая навигация автоматически расширится, без применений излишних манипуляций.
Шаг 2. CSS
Далее нам необходимо установить углы колебания изображения, при переходе к следующему слайду, кроме этого не стоит забывать о таких мелочах как стрелки навигации и навигацию в баре, кроме этого нам необходима небольшая рамка.
.slider {
position:relative;
width: 960px;
height: 450px;
margin: 0 auto;
}
.slider img {
position: absolute;
top:0px;
left:0px;
display: none;
background-color: #f3f4ef;
border: 13px solid #dedede;
}
.slider .active {
display: block;
z-index: 100;
}
.nav {
z-index: 1000;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
padding: 10px 0 20px 0;
}
.nav a {
margin-right: 15px;
display: inline-block;
border-radius: 50%;
width: 10px;
background: #fff;
height: 10px;
}
.nav .navActive {
background: #666;
border: none;
}
.buttons {
width: 100%;
position:absolute;
}
.buttons a {
position:absolute;
z-index: 1000;
top: 230px;
height: 30px;
width: 30px;
background: url(http://oi41.tinypic.com/t6dxsm.jpg);
}
.buttons .prev { left:20px;}
.buttons .next { right:20px; background-position: 30px 30px; }
body {
-webkit-backface-visibility: hidden;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.animated.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;х.
Шаг 3. JS
Последним шагом нам необходимо установить анимацию и оживить наш слайдер скоростью перехода и автопроигрыванием. За это у нас будет отвечать небольшой код js.
$(function() {
var duration = 2500;
var slides = $(".slider img").length;
var i = 1;
$(".slider img:nth-child(1)").addClass("active animated flipInX");
// Slide the images
function slide() {
if(i <= slides) {
var imagelocation = ".slider img:nth-child(" + i + ")";
var navlocation = ".nav a:nth-child(" + i + ")";
$(imagelocation).siblings().removeClass("active animated flipInX");
$(imagelocation).addClass("active animated flipInX");
$(navlocation).siblings().removeClass("navActive");
$(navlocation).addClass("navActive");
}
if(i == 0) { i = slides; }
if(i < 0) { i = 0; }
}
// Add navigation blips
var blips = 0;
for (var nav = 0; nav < slides; nav++) {
$(".nav").append('<a href="#"></a>');
}
$(".nav a:first-child").addClass("navActive");
// Configure the next/prev buttons
$('.next').click(function() {
clearInterval(timer);
if (i == slides) { i = 1; }
else { i++ }
slide();
console.log(i);
})
$('.prev').click(function() {
clearInterval(timer);
if(i == 1) { i = slides; }
else { i-- }
slide();
console.log(i);
})
// Autoplay
timer = setInterval(function() {
i++;
if(i > slides) {
i = 1;
}
slide();
}, duration);
});
Пример
See the Pen слайдер для сайта с эффектом 3D by vavik (@vavik96) on CodePen.