Анимированный слайдер на CSS3.

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

Для начала cсоздаем обычную html-страничку со следующим содержимым:

index.html


<ul id="photos">
  <li><a style="background-image: url('1.jpg');" href="#">5</a></li>
  <li><a style="background-image: url('2.jpg');" href="#">4</a></li>
  <li><a style="background-image: url('3.jpg');" href="#">3</a></li>
  <li><a style="background-image: url('4.jpg');" href="#">2</a></li>
  <li><a style="background-image: url('5.jpg');" href="#">1</a></li>
</ul>

В заголовке странички подключаем таблицы стилей. Это непосредственно основная наша таблица, отвечающая за отображение странички в браузере – style.css, и другая, не менее важная, - animate.css, которая по существу является библиотекой, отвечающей за эффекты анимации средствами CSS3. Также подключаем популярную библиотеку jQuery и наш скрипт , с помощью которых мы будем осуществлять нужные манипуляции элементами.

В теле страницы располагаем список необходимых нам изображений, которые представлены в виде ссылок с разными свойствами bacrground-image. Кроме того в основной таблице стилей используем background-size: cover для подгонки соответствующих изображений по размерам области, выделенной для ссылок.

Также определяем другие свойства элементов:

style.css

*{margin:0;	padding:0;}
body{position:relative;>min-height:500px;}
a, a:visited {outline:none;	color:#1c4f64;}
a:hover{	text-decoration:none;}
section, footer, header{display: block;}
/*----------------------------*/
#photos{
	margin:0 auto;
	padding-top:120px;
	width:650px;
	position:relative;
}
#photos li{
	position:absolute;
	width:650px;
	height:650px;
	overflow:hidden;
	background-color:#fff;
	box-shadow: 1px 1px 1px #ccc;
	z-index:10;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	animation-duration: 1s;
}
#photos li a{
	position:absolute;
	top:6px;
	left:6px;
	right:6px;
	bottom:6px;
	background-size: cover;
	text-indent:-9999px;
	overflow:hidden;
}

/*----------------------------*/
a.arrow{
	width:33px;
	height:33px;
	background:url('arrows.png') no-repeat;
	position:absolute;
	top:440px;
	opacity:0.9;
}
a.arrow:hover{
	opacity:1;
}

a.arrow.previous{
	left:50%;
	background-position:0 0;
	margin-left:-380px;
}
a.arrow.next{
	right:50%;
	background-position:-33px 0;
	margin-right:-380px;
}

Добавляем наш скрипт script.js:

$(function() {
	var ss = [  'fadeOut', 
               'fadeOutDown', 
               'fadeOutUpBig', 
               'bounceOut', 
               'bounceOutDown', 
               'hinge',
               'bounceOutUp', 
               'bounceOutLeft', 
               'rotateOut', 
               'rotateOutUpLeft', 
               'lightSpeedOut', 
               'rollOut'];
	var mm = [  'fadeIn', 
               'fadeInDown', 
               'fadeInRight', 
               'bounceIn', 
               'bounceInRight', 
               'rotateIn', 
               'rotateInDownLeft', 
               'lightSpeedIn', 
               'rollIn', 
               'bounceInDown' ]; 
	var photos = $('#photos'),	ignoreClicks = false;
   
	//ПРИ НАЖАТИИ СТРЕЛКИ ВПЕРЁД
	$('.arrow.next').click(function(e){
		e.preventDefault();
		// выбираем перзний элемент (*оследний)
		var elem = $('#photos li:last');
		// применяем случайный эффект анимации
		elem.addClass('animated')
		elem.addClass( ss[Math.floor(ss.length*Math.random())] );
		setTimeout(function(){
      elem.attr('class','').prependTo(photos);},2000);
	});
   
   
	// ПРИ НАЖАТИИ СТРЕЛКИ НАЗАД
	$('.arrow.previous').click(function(e){
		e.preventDefault();
		// выбираем нижний элемент(первый)
		var elem = $('#photos li:first');
		// передвигаем фотографию вверх и применяем случайную анимацию
		elem
         .appendTo(photos)
			.addClass('animated')
			.addClass( mm[Math.floor(mm.length*Math.random())]);
		setTimeout(function(){elem.attr('class','');},2000);
	});

	
});

В этом скрипте в начале определяем необходимые для работы переменные, а затем создаём обработчики кликов по стрелкам, работа которых ясна из комментариев скрипта.

И это всё! До встречи! :)

ДЕМО СКАЧАТЬ

1596