Анимированная CSS3 галерея с разнообразными эффектами

13-03-07 root Css, JavaScript CSS3, jQuery 0

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

HTML

Начнем, как всегда, с HTML разметки. Создадим обычный HTML5 документ, в котором подключим необходимые файлы:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />

	<title>Animated CSS3 Photo Stack | Tutorialzine Demo</title>

	<!-- CSS Includes -->
	<link href="assets/css/style.css" rel="stylesheet" />
	<link href="assets/css/animate.css" rel="stylesheet" />

</head>
<body>

	<ul id="photos">
		<li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/"
		style="background-image:url(...)">Landscape 5</a></li>
		<!-- еще фото -->
	</ul>

	<a href="#"></a>
	<a href="#"></a>

	<!-- Libraries -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="assets/js/script.js"></script>

</body>
</html>

Элемент #photos содержит все фото. Для каждой картинки определен тег <li>, в котором содержится ссылка на фотографию. Фотографии служат в качестве фона (свойство background-image) для каждой ссылки. Мы будем использовать свойство background-size для того, чтобы картинка заняло все пространство ссылки.

В HTML документе мы подключаем animate.css — главный CSS файл библиотеки, содержащей анимацию для смены картинок в галереи. Перед закрытием тега <body> подключаем jQuery и script.js, о котором поговорим ниже.

JavaScript

Для применения эффектов библиотеки animate library необходимо назначить CSS класс с названием анимации элементу, который хотим анимировать. После анимации нам надо будет переместить картинку в конец списка и показать следующее изображение. Рассмотрим по пунктам, что нам необходимо сделать:

Отслеживать нажатия на стрелку;
При нажатии на стрелку выбрать случайную анимацию (назначив соответствующий CSS класс);
Спустя секунду, после завершения анимации, передвинем фото в верх списка с помощью jQuery функции prependTo и удалим назначенный ранее CSS класс.
Со стрелкой для предыдущего изображения проделаем примерно то же самое с небольшой разницей: перед назначением CSS класса переместим из конца списка в начало.

В результате у нас получится стек из фотографий.

Также мы сделаем автоматическую смену изображений, что позволит использовать данный пример в качестве сладера.

$(function() {

	var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown',
		'hinge', 'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft',
		'lightSpeedOut', 'rollOut'];

	var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight',
			'rotateIn', 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown'];

	var photos = $('#photos'),
		ignoreClicks = false;

	$('.arrow').click(function(e, simulated){
		if(ignoreClicks){

			// если нажатия на стрелки отслеживать не надо

			e.stopImmediatePropagation();
			return false;
		}

		ignoreClicks = true;

		if(!simulated){
			// если произощло нажатие на кнопку,
			// останавливаем автоматическую смену картинок
			clearInterval(slideshow);
		}
	});

	// нажатия на стрелку следующего изображения
	$('.arrow.next').click(function(e){

		e.preventDefault();

		var elem = $('#photos li:last');

		// назначаем случайную анимацию
		elem.addClass('animated')
			.addClass( exits[Math.floor(exits.length*Math.random())] );

		setTimeout(function(){

			// убираем класс анимации
			elem.attr('class','').prependTo(photos);

			// анимация закончилась
			// позволяем нажатия на кнопки:
			ignoreClicks = false;

		},1000);
	});

	// нажатия на стрелку предыдущего фото
	$('.arrow.previous').click(function(e){

		e.preventDefault();

		var elem = $('#photos li:first');

		// передвигаем картинку вверх
		// и назначаем анимацию

		elem.appendTo(photos)
			.addClass('animated')
			.addClass( entrances[Math.floor(entrances.length*Math.random())] );

		setTimeout(function(){

			// убираем класс
			elem.attr('class','');

			ignoreClicks = false;

		},1000);
	});

	// автоматическая смена картинок
	var slideshow = setInterval(function(){

		// меняем каждые 1.5 секунды
		$('.arrow.next').trigger('click',[true]);

	}, 1500);

});

В примере использованы не все возможные анимации, весь список можно найти на github.

Осталось только написать CSS для нашего примера.

CSS

Рассмотрим толь ко ту часть CSS, которая относится непосредственно к галерее:

#photos{
	margin:0 auto;
	padding-top:120px;
	width:450px;
	position:relative;
}

#photos li{
	position:absolute;
	width:450px;
	height:450px;
	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;
}

Для изменения периода анимации, измените свойство animation-duration. В нашем примере установлена 1 секунда.

Готово! Вы можете использовать этот пример совместно с PHP и автоматически формировать список фото, как в уроке Красивая галерея на jQuery.