Автор

Слайдер с парящими изображениями на jQuery

Слайдер с парящими изображениями на jQuery


 

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

 

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

 

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

Шаг 1. HTML

HTML структура очень проста, нам нужно два DIV с изображениями для содержания и его описания. Для примера были взяты изображения тем для wordpress.

<div id="container">
<div id="itemlist">
<img src="images/busby.jpg" alt="Busby" id="busby">
<img src="images/gridly.jpg" alt="Gridly" id="gridly">
<!-- to n image -->
</div>
<div id="itemdescription">
<span data-for="busby">Busby Theme</span>
<span data-for="gridly">Gridly Theme</span>
<!-- to n description -->
</div>
</div>

Разметка достаточно простая. Каждый элемент содержит атрибут с описанием и id. Давайте перейдем к следующему шагу.

Шаг 2. CSS

Как вы заметили в демо наши изображения накладываются друг на друга, для этого нам необходимо указать отступ в -80px, следовательно отступ для следующего изображения будет -160px. Кроме этого нам необходимо указать общие параметры для контейнера:

#itemdescription {
position: relative;
width: 400px;
margin: 0 auto;
left: 6em;
top: 2em;
}

#itemdescription span {
display: none;
}

#itemlist {
display: block;
width: 400px;
margin: 3em auto;
position: relative;
transform-style: preserve-3d;
}

#itemlist img {
position: absolute;
cursor: pointer;
left: 0;
box-shadow: 0px 15px 50px rgba(0,0,0,0.4);
}

#itemlist img:hover {
top: -5px;
}

#itemlist img.item-0 {
z-index: 4;
transform: scale(1);

}

#itemlist img.item-1 {
z-index: 3;
left: -80px;
transform: scale(0.9);
}

#itemlist img.item-2 {
z-index: 2;
left: -160px;
transform: scale(0.8);
}

#itemlist img.item-3 {
z-index: 1;
left: -240px;
transform: scale(0.7);
}

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

.transition {
transition: 0.5s ease-out;
}

.show {
animation: show 1s linear;
}

@keyframes show{
25% {
left: -450px;
}

50% {
z-index: 5;
left: -500px;
transform: rotate3d(0,1,0,0deg);
}

70% {
z-index: 5;
left: -250px;
transform: rotate3d(0,1,0,180deg);
}

100% {
z-index: 5;
left: 0px;
transform: rotate3d(0,1,0,360deg);
}
}

Шаг 3. jQuery

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

//Перемещение элементов
window.setTimeout(function () {
for(var i = thisOrder; i >= 0; i--) {
//Изменить порядок, положение
movedItem = item.filter('[data-order=' + i + ']');
newOrder= parseInt(movedItem.attr('data-order')) + 1;
className = 'item-' + newOrder;
//Перемещение с переходом
movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);
//Удалить переход
item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() {
item.removeClass('transition');
});
}
}, 500);

Вот и все. Готово!

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

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

vk.com/club.ssdru

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



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

Слайдер с парящими изображениями на jQuery

Отображение информации на странице в виде jQuery вкладок.


Слайдер с парящими изображениями на jQuery

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


Слайдер с парящими изображениями на jQuery

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


Слайдер с парящими изображениями на jQuery

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close