Автор

19 04.2013
3D слайдер для сайта с помощью jQuery

3D слайдер для сайта с помощью jQuery


 

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

 

ДЕМО
ИСХОДНИКИ

 

Но что же делать в случае, если Вам необходимо сделать такой слайдер, но при этом выделиться среди остальных оригинальностью? Тогда данный урок будет весьма интересен. Мы рассмотрим как можно создать замечательный слайдер с 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(){}
 })
})

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

08 07.2013
3D слайдер для сайта с помощью jQuery

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


17 04.2013
3D слайдер для сайта с помощью jQuery

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


14 06.2014
3D слайдер для сайта с помощью jQuery

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


28 09.2013
3D слайдер для сайта с помощью jQuery

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close