Ресурсов для создания сайта с каждым днем становится все больше, различные эффекты, переходы и приемы позволяют поразить взор посетителя и заинтриговать методом привлечения информации. На мультимедийных сайтах, и не только, стали весьма популярны так называемые слайдеры контента, которые содержат в себе изображения, музыку и видео, это весьма удобно, ведь позволяет освободить множество места и тем самым преподнести необходимую информацию посетителю. Но слайдеров стало слишком много, и они, по функциональности, весьма схожи.
Но что же делать в случае, если Вам необходимо сделать такой слайдер, но при этом выделиться среди остальных оригинальностью? Тогда данный урок будет весьма интересен. Мы рассмотрим как можно создать замечательный слайдер с 3D трансформациями. Идея состоит в том, что изображения в слайдере изменяются с различными объемными трансформациями.
Шаг 1. HTML
И так, приступим, для начала мы рассмотрим полную HTML-разметку, которая будет состоять с простого списка:
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>3D слайдер для сайта с помощью jQuery | Демонстрация для сайта s-sd.ru</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/chopslider.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.id.chopslider-2.2.0.free.min.js"></script>
<script src="js/jquery.id.cstransitions-1.2.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<br><br>
<div class="container">
<div class="wrapper">
<div class="s-shadow-b"></div>
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"> <img src="slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div>
<div class="slide"> <img src="slide_images/pic2.jpg" width="900" height="300" alt="photo #2" /> </div>
<div class="slide"> <img src="slide_images/pic3.jpg" width="900" height="300" alt="photo #3" /> </div>
<div class="slide"> <img src="slide_images/pic4.jpg" width="900" height="300" alt="photo #4" /> </div>
<div class="slide"> <img src="slide_images/pic5.jpg" width="900" height="300" alt="photo #5" /> </div>
<div class="slide"> <img src="slide_images/pic6.jpg" width="900" height="300" alt="photo #6" /> </div>
<div class="slide"> <img src="slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div>
</div>
<div class="pagination">
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
</div>
<div class="caption"></div>
</div>
</div>
</body>
</html>Все слайды заключены в элементы DIV с классом "slide". Обратите внимание, что мы должны создать такое же количество навигации элементов, как и количество слайдов.
Шаг 2. CSS
Первый файл layout.css - это макет нашей демонстрационной страницы. Второй, chopslider.css- это настройки слайдера. Вы можете настроить их, как вы пожелаете. Сейчас файл содержит следующие стили:
chopslider.css
.wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:960px;
height:300px;
display:block;
padding-top:150px;
padding-bottom:120px;
background:url(../images/podium.png) no-repeat bottom;
z-index:2;
}
.wrapper2 {
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:960px;
height:300px;
display:block;
z-index:2;
text-align:center;
padding-bottom:50px;
}
.wrapper2 a {
display:inline-block;
padding:0px 5px;
background:#fff;
border:1px solid #ccc;
border-radius:3px;
text-decoration:none;
margin:0px 5px;
}
.wrapper2 .active-transition {
background:#222;
color:#fff;
}
/*---------- Слайдер ----------- */
/*---------- Левый и правый триггеры ----------- */
#slide-prev {
position:absolute;
width:21px;
height:33px;
bottom:39px;
left:26px;
z-index:4;
background:url(../images/sl-control.png) left top no-repeat;
}
#slide-next {
position:absolute;
width:21px;
height:33px;
bottom:39px;
right:26px;
z-index:4;
background:url(../images/sl-control.png) left bottom no-repeat;
}
/*---------- Тень, только для укладки ----------- */
.s-shadow-b{
background:url(../images/shadow.png) no-repeat top;
width:876px;
height:55px;
position:absolute;
left:42px;
bottom:60px;
z-index:1;
}
/*---------- Главный контейнер Slider----------- */
#slider {
width:900px;
height:300px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:2;
display:block;
}
/* Каждый слайд должен быть скрыт по умолчанию */
.slide { display:none; }
/*
И только слайд с "CS-activeSlide" класса должно быть видно!
! Зарезервировано имя класса. Требуется класс!
*/
.cs-activeSlide { display:block; }
/ * Контейнер с текстом заголовок в. Должны быть скрыты * /
.slide-descriptions {
display:none;
}
/ * Контейнер с подписью, должны быть скрыты по умолчанию * /
.caption {
background: url("../images/d-bg.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
display: none;
height: 280px;
padding: 20px;
position: absolute;
right: 40px;
top: 140px;
width: 180px;
z-index: 3;
}
.full-3D {
right: 40px;
top: 580px;
width: 840px;
height:20px;
}
/ * Контейнер с разбивку кнопки * /
.pagination {
bottom: 50px;
left: 345px;
margin-top: 50px;
position: absolute;
text-align: center;
}
.slider-pagination {
display:inline-block;
width:15px;
height:10px;
background:url(../images/navi.png) no-repeat left bottom;
margin:0 10px;
cursor:pointer;
position:relative;
z-index:200;
}
/ * Это необходимый класс для активного класа. ! * /
.cs-active-pagination {
background:url(../images/navi.png) no-repeat left top;
}
/ * Несколько сдвигов * /
.slider-2 {
padding-top:0;
margin-top:20px;
}
#slider-1, #slider-2 {
width:900px;
height:300px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:2;
display:block;
}
.cs-activeSlide-2 {
display:block
}
.cs-active-pagination-2 {
background:url(../images/navi.png) no-repeat left top;
}
Шаг 3. JS
Последним шагом будет рассмотрение некоторых параметров js.
main.js
jQuery(function(){
$("#slider").chopSlider({
/ * Слайд элемент * /
slide : ".slide",
// * Регуляторы * /
nextTrigger : "a#slide-next",
prevTrigger : "a#slide-prev",
hideTriggers : true,
sliderPagination : ".slider-pagination",
// * Подписи * /
useCaptions : true,
everyCaptionIn : ".sl-descr",
showCaptionIn : ".caption",
captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
/* Автопроигрывание */
autoplay : true,
autoplayDelay : 5000,
/ * Для браузеров, которые поддерживают 3D трансформации * /
t3D : csTransitions['3DFlips']['random'],
t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
noCSS3 : csTransitions['noCSS3']['random'],
mobile : csTransitions['mobile']['random'],
onStart: function(){},
onEnd: function(){}
})
})
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
