Анимированная CSS3 галерея с разнообразными эффектами
В этом уроке мы создадим анимированную галерею, в которой будем использовать разные эффекты для смены изображений. Все эти эффекты реализуются с помощью CSS3. Так же мы сделаем автоматическую смену изображений, так что можно будет использовать галерею в качестве слайд шоу.
Анимированная 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 и автоматически формировать список фото
