Автор

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(){}
 })
})

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Очередная выдвижная панель с любым необходимым для вас контентом! В примерах 3 варианта: фиксированная, выезжающая с лева и третья выезжающая с права. В исходных файлах есть все варианты СSS. Мы рассмотрим один с фиксированной кнопкой и панелью.


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

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


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

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


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

В данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close