4085
- 0
Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: 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;
}Код:
.pxs_bg{
background:transparent url(../images/bg.png) repeat top left;
}Код:
.pxs_bg div{
position:absolute;
top:0px;
left:0px;
height:420px;
background-repeat:repeat;
background-position:top left;
background-color:transparent;
}Код:
.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);
}В начале следующая блок будет невидим:
Код:
.pxs_slider_wrapper{
display:none;
}Давайте сбросим стиль для обоих списков:
Код:
.pxs_container ul{
margin:0px;
padding:0px;
list-style:none;
}Код:
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_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: Слайдер будет работать в случайном порядке
Ну вроде все ,пользуемся
Можешь почитать и вот эту статейку "auth_social - авторизация через соцсети "
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.