Создаем слайдер для сайта с эффектом 3D


Создаем слайдер для сайта с эффектом 3D

Минимализм и эффект объемной трансформации совместно шагают по просторам современного веб-дизайна. Красочное сочетание этих эффектов позволяет добавить изюминку в дизайн сайта, а это плодотворно сказывается на узнаваемости ресурса.Успешность сайта кроется в удобстве и простоте, кроме этого не забывайте о мелочах. В данном уроке мы рассмотрим процесс построения весьма простого слайдера, но в нем будет небольшой нюанс, он будет объемный, в сочетании с простотой дизайна мы получаем весьма удачную смесь слайдера.

Создаем слайдер для сайта с эффектом 3D

ДЕМОНСТРАЦИЯ | ИСХОДНИКИ

 

У нас будет автоматический слайдер, оформленный тремя изображения и серой рамкой, чтобы не позволить изображениям сливаться с фоном, и так, давайте посмотрим, как у нас это получилось.

Шаг 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>

 

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

Создаем слайдер для сайта с эффектом 3D

Шаг 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);
});

 

Вот и все. Готово!

Материал взят из зарубежного источника. и переведен rudebox И представлен исключительно в ознакомительных целях.

Previous Как создать адаптивный шаблон сайта на CSS3
Next Анимация при прокрутке страницы для блока с помощью JQuery и CSS

Suggested Posts

Крутые исходники PSD

Сервисы и плагины: кросспостинг из WordPress

Оформление карт Google под себя

10 WordPress-плагинов для работы с шорткодами

Выбираем лучшее облачное хранилище

Простой эффект YouTube-меню