Автор

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

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

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


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

Продолжаем рассматривать интересные галереи для сайта. В сегодняшнем уроке мы рассмотрим весьма интересную вещь, а именно технологию drag-and-drop ("перетащи-и-брось"), добавив к ней плагин fancybox, который позволит открывать изображение в оригинальный размер, в модальном окне. Смотрится достаточно красиво, весьма заинтересовывая пользователей своей оригинальностью и свободой действий, а именно, перетаскивание изображений по холсту. Вот что у нас с этого вышло..


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

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close