HTML-код
Как обычно, первый этап заключается в том, чтобы представить вам разметку для примера. Мы начинаем с обычного HTML5-документа, в который включаем несколько CSS/JS-файлов:
index.html
<!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>
<!-- More photos here -->
</ul>
<a href="#" class="arrow previous"></a>
<a href="#" class="arrow next"></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>UL #photos содержит в себе фотографии, которые мы собираемся анимировать. Для каждого фото мы определяем пункт LI с анкорным элементом внутри. Изображение устанавливается в качестве параметра background-image для ссылки. Как видно из кода CSS, мы используем параметр background-size, чтобы изображение принудительно покрывало всю ширину и высоту ссылки. Добавляя больше фотографий, всегда помните о том, что так как они позиционированы абсолютно, они будут отображаться в обратном порядке (последняя фотография будет расположена в самом верху стопки).
В головной секции документа мы включаем наши основные каскадные таблицы и animate.css – библиотеку, которая дает нам все эти великолепные CSS3-анимации. Перед закрывающим тэгом body мы указываем jQuery-библиотеку и script.js, о которым мы поговорим далее.
javascript-код
Чтобы запустить эффекты, которые нам предоставляет библиотека, нам нужно связать имя класса элемента с названием анимации. Нам также нужно будет передвинуть анимированное фото в самый низ стопки после того, как анимация будет завершена, чтобы мы могли показать следующее изображение. Вот что нам нужно сделать, чтобы заставить этот пример работать:
* Сначала мы отслеживаем клики по стрелкам;
* Затем, когда клик по стрелке замечен, мы запускаем случайно выбранную css-анимацию, привязывая название класса к самому верхнему элементу стопки (на самом деле, это последний LI-элемент, но мы ведь применили позиционирование);
* После одной секунды, когда анимация завершается, мы перемещаем анимированный элемент за друге LI-элементы с помощью jQuery-метода prependTo (это переместит его в самый низ стопки), и исключаем классы, которые мы задавали выше.
* Что касается стрелки перехода к предыдущему изображению, то здесь мы делаем примерно то же самое, но единственное различие заключается в том, что мы берем последнее изображение, и помещаем на самый верх стопки до запуска анимации.
Вдобавок, мы воспользуемся функцией автоматического продолжения, как это было сделано в этой статье. Это превратит наш пример в прикольное слайд-шоу, которое останавливает автоматизированные переходы при нажатии на стрелку.
Вот как выглядит наш код:
assets/js/script.js
$(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){
// If clicks on the arrows should be ignored,
// stop the event from triggering the rest
// of the handlers
e.stopImmediatePropagation();
return false;
}
// Otherwise allow this click to proceed,
// but raise the ignoreClicks flag
ignoreClicks = true;
if(!simulated){
// Once the user clicks on the arrows,
// stop the automatic slideshow
clearInterval(slideshow);
}
});
// Listen for clicks on the next arrow
$('.arrow.next').click(function(e){
e.preventDefault();
// The topmost element
var elem = $('#photos li:last');
// Apply a random exit animation
elem.addClass('animated')
.addClass( exits[Math.floor(exits.length*Math.random())] );
setTimeout(function(){
// Reset the classes
elem.attr('class','').prependTo(photos);
// The animation is complate!
// Allow clicks again:
ignoreClicks = false;
},1000);
});
// Listen for clicks on the previous arrow
$('.arrow.previous').click(function(e){
e.preventDefault();
// The bottom-most element
var elem = $('#photos li:first');
// Move the photo to the top, and
// apply a random entrance animation
elem.appendTo(photos)
.addClass('animated')
.addClass( entrances[Math.floor(entrances.length*Math.random())] );
setTimeout(function(){
// Remove the classess
elem.attr('class','');
// The animation is complate!
// Allow clicks again:
ignoreClicks = false;
},1000);
});
// Start an automatic slideshow
var slideshow = setInterval(function(){
// Simulate a click every 1.5 seconds
$('.arrow.next').trigger('click',[true]);
}, 1500);
});Мы воспользовались не всеми эффектами, которые нам предоставляет animate.css, но вы можете просмотреть полный список на странице в github.
Все, что нам осталось сделать, это дописать несколько CSS-стилей.
CSS-код
Здесь мы не будем демонстрировать все стили, и ограничимся только теми, которые напрямую связаны со стопкой фотографий:
assets/css/styles.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 секунду. Есть и другие параметры, которыми вы можете воспользоваться, включая animation-delay для задержки перед началом анимации, animation-iteration-count для установки количества повторов.
Готово!
На этом наша анимированная стопка фотографий готова! Вы можете использовать это миниатюрное слайд-шоу, которое будет отлично работать в любом мобильном браузере!
Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
