Автор

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

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

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


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

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


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

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


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

Как высказался руководитель компании UMIHOST в своем блоге Антон Приходько – Все студии и фрилансеры, занимающиеся изготовлением сайтов, где-то эти сайты в итоге размещают. Редко клиент сам заботится о хостинге своего сайта, а тем более, занимается собственно размещением сайта — чаще всего сайт живет там, куда его «поселил» изготовитель.

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

  1. Как выбрать место размещения сайта таким образом, чтобы не опростоволоситься в глазах заказчика? Чем стабильнее будет работать сайт, тем больше доверия к изготовителю: и карма от этого улучшается, и доверие в итоге окупается.
  2. Как выбрать место для размещения сайта таким образом, чтобы сайт не только стабильно работал, но еще и приносил своему создателю выгоду?

105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close