Хаки и Скрипты Next Generation CMS

Слайдер на плагине jQuery «Parallax Slider»

irbees2008 irbees2008 Опубликовано - 20 - сентября Слайдшоу и анимация
4081 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.
Установка и настройка
Скачать архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Структура HTML состоит из главного контейнера с классом “pxs_container”. Мы добавим оформление для трех различных фонов, которые мы оживим по-разному, чтобы создать эффект параллакса. У фоновых изображений будет некоторая прозрачность, чтобы видеть, как они двигаются между собой.
Мы также добавим loading element и два не заказанных списка для полных изображений и уменьшенных изображений. Далее, мы добавим навигационные элементы.
Код самого слайдера размещаем там где хотим видеть слайдер

Код:
<div id="pxs_container" class="pxs_container">
<div class="pxs_bg">
<div class="pxs_bg1"></div>
<div class="pxs_bg2"></div>
<div class="pxs_bg3"></div>
</div>
<div class="pxs_loading">Loading images...</div>
<div class="pxs_slider_wrapper">
<ul class="pxs_slider">
<li><img src="images/1.jpg" alt="First Image" /></li>
<li><img src="images/2.jpg" alt="Second Image" /></li>
...
</ul>
<div class="pxs_navigation">
<span class="pxs_next"></span>
<span class="pxs_prev"></span>
</div>
<ul class="pxs_thumbnails">
<li><img src="images/thumbs/1.jpg" alt="First Image" /></li>
<li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
...
</ul>
</div>
</div>
Теперь, настройка стиля.
CSS
Мы начнем с главного контейнера. Так как мы будем использовать целую страницу для ширины слайдера, мы установим его в 100%. Этот элемент будет иметь свойство position relative, потому что мы установим весь элемент внутри position absolute (и мы хотим, чтобы они были перемещались относительно контейнера а не страницы):
Код:
.pxs_container{
width:100%;
height:420px;
position:relative;
border-top:7px solid #333;
border-bottom:7px solid #333;
overflow:hidden;
-moz-box-shadow:0px 0px 7px #000;
-webkit-box-shadow:0px 0px 7px #000;
box-shadow:0px 0px 7px #000;
}
У wrapper для отделений, которые будут содержать фоны параллакса, будет повторное фоновое изображение. Это изображение - просто простой градиент:
Код:
.pxs_bg{
background:transparent url(../images/bg.png) repeat top left;
}
Блоки в wrapper совместно используют следующие свойства стиля:
Код:
.pxs_bg div{
position:absolute;
top:0px;
left:0px;
height:420px;
background-repeat:repeat;
background-position:top left;
background-color:transparent;
}
Ширина будет установлена динамически в JavaScript. У фоновых блоков будут различные фоновые изображения:
Код:
.pxs_bg .pxs_bg1{
background-image:url(../images/bg1.png);
}
.pxs_bg .pxs_bg2{
background-image:url(../images/bg2.png);
}
.pxs_bg .pxs_bg3{
background-image:url(../images/bg3.png);
}
Мы также установим left value этих блоков динамически. Но мы возвратимся к этому позже. Давайте посмотрим на стиль других элементов.
В начале следующая блок будет невидим:
Код:
.pxs_slider_wrapper{
display:none;
}
Он содержит все элементы, которые мы хотим загрузить в начале, поэтому, как только загрузка будет сделано, мы покажем Блок и все содержимое.
Давайте сбросим стиль для обоих списков:
Код:
.pxs_container ul{
margin:0px;
padding:0px;
list-style:none;
}
Основная идея для списка слайдера состоит в том, что мы делаем действительно длинный список со всеми элементами li, имеющими ширину целого окна. Так, что Вы видите на экране слайдера, фактически один целый li. Мы установим ширину ul динамически, чтобы ширина окна соответствовала числу изображений в списке. Присвоение свойства float left списку, и корректная ширины ul гарантирует, что элементы списка выстроены в линию друг рядом с другом:
Код:
ul.pxs_slider{
position:absolute;
left:0px;
top:0px;
height:420px;
}
ul.pxs_slider li{
height:420px;
float:left;
position:relative;
}
Изображение слайдера в списке будет центрироваться горизонтально, применяя автоматические поля налево и право:

Код:
ul.pxs_slider li img{
display:block;
margin:35px auto 0px auto;
-moz-box-shadow:0px 0px 7px #222;
-webkit-box-shadow:0px 0px 7px #222;
box-shadow:0px 0px 7px #222;
border: 8px solid transparent;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
Добавление прозрачной границы и тени поля создаст эффект стекла вокруг изображения.
Список миниатюр будет позиционироваться абсолютно. Мы добавляем left of 50%, чтобы центрировать его, динамически устанавливая его ширину и отрицательное левое поле в JavaScript:
Код:
ul.pxs_thumbnails{
height:35px;
position:absolute;
top:320px;
left:50%;
}
ul.pxs_thumbnails li{
position:absolute;
display:block;
}
Мы добавим белую границу вокруг миниатюр и тень поля:
Код:
ul.pxs_thumbnails li img{
border: 5px solid #FFFFFF;
-moz-box-shadow:1px 1px 7px #555;
-webkit-box-shadow:1px 1px 7px #555;
box-shadow:1px 1px 7px #555;
cursor:pointer;
display:block;
opacity:0.7;
}
Миниатюры текущего изображения должны быть абсолютно непрозрачными:
Код:
ul.pxs_thumbnails li.selected img{
opacity:1.0;
}
Общий стиль двух кнопок навигации - следующее:
Код:
.pxs_navigation span{
position:absolute;
width:30px;
height:60px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
top:145px;
opacity:0.6;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
cursor:pointer;
}
.pxs_navigation span:hover{
opacity:0.9;
}
Давайте добавим стрелку к каждому кнопке навигации:

Код:
.pxs_navigation span.pxs_prev{
background:#000 url(../images/prev.png) no-repeat center center;
}
.pxs_navigation span.pxs_next{
background:#000 url(../images/next.png) no-repeat center center;
}
Мы установим левое (pxs_prev) и право (pxs_next) значение динамически, чтобы придерживаться левой и правой стороны изображения.
И наконец, мы добавим загружающийся элемент:

Код:
.pxs_loading{
color:#fff;
font-size:20px;
padding:15px 15px 15px 50px;
position:absolute;
background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
opacity:0.7;
width:180px;
position:absolute;
top:150px;
left:50%;
margin-left:-90px;
}

JAVASCRIPT
Основная идея этогослайдера состоит в том, чтобы двигать изображения (очевидно), и анимировать эти три фона по-разному, чтобы создать некоторую перспективу. Так, когда , например, будем скользить к следующему изображению, мы аниммируем левое значение слайдера ul к минус ширина окна (потому что это - ширина одного списка). Мы также аниммируем фоновый блок, который является визуально самым верхним фоном, но анимация будет половиной ширины окна. Фон, позади которого переместит одну четверть ширины окна и т.д. Таким образом, фон, который "более далек", переместит меньше, что описывает принцип параллакса.
Мы хотим создать плагин из этого скрипта, таким образом, мы первоначально определим некоторые опции. Мы запустим, кэшируя самые важные элементы.
Код:
(function($) {
$.fn.parallaxSlider = function(options) {
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
return this.each(function() {
var $pxs_container = $(this),
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

//the main slider
var $pxs_slider = $('.pxs_slider',$pxs_container),
//the elements in the slider
$elems = $pxs_slider.children(),
//total number of elements
total_elems = $elems.length,
//the navigation buttons
$pxs_next = $('.pxs_next',$pxs_container),
$pxs_prev = $('.pxs_prev',$pxs_container),
//the bg images
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
//current image
current = 0,
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
//the thumbs
$thumbs = $pxs_thumbnails.children(),
//the interval for the autoplay mode
slideshow,
//the loading image
$pxs_loading = $('.pxs_loading',$pxs_container),
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);

//first, preload all the images
var loaded = 0,
$images = $pxs_slider_wrapper.find('img');

$images.each(function(){
var $img = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == total_elems*2){
$pxs_loading.hide();
$pxs_slider_wrapper.show();

//width of an image
//(assuming all images have the same sizes)
var one_image_w = $pxs_slider.find('img:first').width();

/*
set the width of the slider,
of each one of its elements, and of the
navigation buttons
*/
setWidths($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev);

/*
set the widths of the thumbs
and spread them evenly
*/
$pxs_thumbnails.css({
'width' : one_image_w + 'px',
'margin-left' : -one_image_w/2 + 'px'
});
var spaces = one_image_w/(total_elems+1);
$thumbs.each(function(i){
var $this = $(this);
var left = spaces*(i+1) - $this.width()/2;
$this.css('left',left+'px');

if(o.thumbRotation){
var angle = Math.floor(Math.random()*41)-20;
$this.css({
'-moz-transform' : 'rotate('+ angle +'deg)',
'-webkit-transform' : 'rotate('+ angle +'deg)',
'transform' : 'rotate('+ angle +'deg)'
});
}
//hovering the thumbs animates them up and down
$this.bind('mouseenter',function(){
$(this).stop().animate({top:'-10px'},100);
}).bind('mouseleave',function(){
$(this).stop().animate({top:'0px'},100);
});
});

//make the first thumb to be selected
highlight($thumbs.eq(0));

//slide, when clicking the navigation buttons
$pxs_next.bind('click',function(){
++current;
if(current >= total_elems)
if(o.circular)
current = 0;
else{
--current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
$pxs_prev.bind('click',function(){
--current;
if(current < 0)
if(o.circular)
current = total_elems - 1;
else{
++current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});

/*
clicking a thumb will slide to the respective image
*/
$thumbs.bind('click',function(){
var $thumb = $(this);
highlight($thumb);
//if autoplay interrupt when user clicks
if(o.auto)
clearInterval(slideshow);
current = $thumb.index();
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});



/*
activate the autoplay mode if
that option was specified
*/
if(o.auto != 0){
o.circular = true;
slideshow = setInterval(function(){
$pxs_next.trigger('click');
},o.auto);
}

/*
when resizing the window,
we need to recalculate the widths of the
slider elements, based on the new window width;
we need to slide again to the current one,
since the left of the slider is no longer correct
*/
$(window).resize(function(){
w_w = $(window).width();
setWidths(
$pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev
);
slide(
current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
1,
o.easing,
o.easingBg
);
});

}
}).error(function(){
alert('here')
}).attr('src',$img.attr('src'));
});
});
};

//the current window width
var w_w = $(window).width();

var slide = function(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
speed,
easing,
easingBg){
var slide_to = parseInt(-w_w * current);
$pxs_slider.stop().animate({
left : slide_to + 'px'
},speed, easing);
$pxs_bg3.stop().animate({
left : slide_to/2 + 'px'
},speed, easingBg);
$pxs_bg2.stop().animate({
left : slide_to/4 + 'px'
},speed, easingBg);
$pxs_bg1.stop().animate({
left : slide_to/8 + 'px'
},speed, easingBg);
}

var highlight = function($elem){
$elem.siblings().removeClass('selected');
$elem.addClass('selected');
}

var setWidths = function($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev){
/*
the width of the slider is the window width
times the total number of elements in the slider
*/
var pxs_slider_w = w_w * total_elems;
$pxs_slider.width(pxs_slider_w + 'px');
//each element will have a width = windows width
$elems.width(w_w + 'px');
/*
we also set the width of each bg image div.
The value is the same calculated for the pxs_slider
*/
$pxs_bg1.width(pxs_slider_w + 'px');
$pxs_bg2.width(pxs_slider_w + 'px');
$pxs_bg3.width(pxs_slider_w + 'px');

/*
both, the right and left of the
navigation next and previous buttons will be:
windowWidth/2 - imgWidth/2 + some margin
(not to touch the image borders)
*/
var position_nav = w_w/2 - one_image_w/2 + 3;
$pxs_next.css('right', position_nav + 'px');
$pxs_prev.css('left', position_nav + 'px');
}

$.fn.parallaxSlider.defaults = {
auto : 0,
speed : 1000,
easing : 'jswing',
easingBg : 'jswing',
circular : true,
thumbRotation : true
};
//easeInOutExpo,easeInBack
})(jQuery);
Мы также добавляем следующий сценарий, чтобы инициировать наш слайдер:
Код:
$(function() {
var $pxs_container = $('#pxs_container');
$pxs_container.parallaxSlider();
});
Опции для слайдера - следующее:
auto: Сколько секунд, чтобы периодически двигать содержание. Если установлено в 0 тогда автоматическое воспроизведение выключено.
speed: Скорость анимации
easing: Упрощение эффекта для анимации понижения
easingBg: Упрощение эффекта для фоновой анимации
circular: Круговой ползунок
thumbRotation: Слайдер будет работать в случайном порядке
Ну вроде все ,пользуемся

Можешь почитать и вот эту статейку "Выводим интересный вариант меню для вашего сайта"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4604 дня
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [11]
  • Гости: [10]
  • Поисковики: [1] Google
  • Были сегодня : [1] Google
  • SQL запросов: 35
  • Генерация страницы: 0.56сек
  • Потребление памяти: 5.215 Mb 
  •   Яндекс.Метрика