Анимированный слайдер с СSS 3
 |
 |
Исходники |
Пример |
В этом уроке мы создадим анимированный слайдер, использующий различные модные эффекты перехода от изображения к изображению.
Эффекты реализованы полностью на CSS3, что означает их качественное и корректное отображение во всех современных браузерах и на мобильных устройствах.
Полученный в конце нашего урока слайдер будет автоматически переходить от фотографии к фотографии.
HTML
Первым делом, для наглядности посмотрим на разметку индексной страницы, которая в сущности является обычной html5 страницей, к которой подключено несколько CSS и JS (javaScript) файлов.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Animated CSS3 Photo Stack | Tutorialzine Demo</title>
<!-- Подключаем стили -->
<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="#" class="arrow previous"></a>
<a href="#" class="arrow next"></a>
<!-- Подключаем JavaScript-файлы -->
<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 с id=“photos” содержит в себе фотографии, который будут анимированы.
Каждая фотография является в сущности ссылкой, обёрнутой в тег li и якорем внутри этой ссылки. Изображение же задано свойством background-image для ссылки.
Также мы используем свойство background-size:cover; чтобы изображение автоматически ресайзилось и полностью заполняло собой область, что была определена как область для ссылки. При добавлении новых фотографий учитывайте, что все они позиционируются абсолютно и будут показаны в обратном порядке, т.е. самая последняя фотография будет на самом верху.
В области тега head подключаем основные стили и стиль animate.css – библиотеку, содержащую все эти чудесные CSS3-анимации. Перед закрытием тега body мы подключаем последнюю версию библиотеки jQuery и файл script.js. О них мы поговорим далее.
JavaScript
Чтобы запустить триггер эффектов, которые даёт нам библиотека animate.css, нам нужно передать имя класса элементу с названием анимации. Нам также нужно передвинуть анимируемое изображение в конец стека по окончанию анимации, таким образом показав следующее изображение, идущее по списку. Вот что нам нужно, чтобы данный пример заработал:
1. Сперва мы будем отслеживать клик по одной из стрелок
2. Затем, как только был произведён клик по стрелке «Вперёд», будет запускаться триггер, случайным образом выбирающий одну из CSS-анимаций из библиотеки animate.css по специально назначенному классу, который будет присвоен самому верхнему элементу списка (на самом деле - самому последнему тегу li, если смотреть относительно вёрстки, из-за позиционирования).
3. После одной секунды, когда анимация будет завершена, мы передвигаем элемент за остальные элементы li с помощью метода библиотеки jQuery prependTo (он будет двигать элементы вниз стека) и удалять класс, что мы назначили до этого.
4. Для стрелки «Назад» будет происходить то же самое, за исключением одного отличия - мы будем передвигать самый «нижний» элемент стека на позицию самого «верхнего» элемента и присваивать ему специальный класс до начала срабатывания анимации.
5. В дополнение к этому мы добавим функцию автоматической смены изображений. Это преобразует наш пример в классное слайд-шоу, с автоматической сменой изображений, которая остановится как только пользователь кликнет по одной из стрелок.
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){
// Если клики по стрелкам - игнорируются, события срабатывания остальных обработчиков
// останавливаются.
//Другими словами, во время анимации перехода от слайда к слайду мы запускаем игнорирования клика по стрелкам, что блокирует преждевременный переход к следующему слайду до завершения текущей анимации
e.stopImmediatePropagation();
return false;
}
// В другом случае позволяется кликать по стрелкам, но устанавливается флаг ignoreClicks. Т.е. возможность клика по стрелкам сохраняется но, преждевременного перехода к следующему слайду не происходит
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);
});
Я не использовал все эффекты, что представлены в библиотеке, но вы можете изучить полный список анимационных эффектов и выбрать что-то себе по душе.
Всё, что нам осталось сделать - это прописать несколько 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 секунду. Вы также можете задать и больше других различных настроек, таких как: задержка анимации, до того как триггер, запускающий анимацию сработал и число итераций одной анимации после определённого количества повторений.
Готово!
Итак, наш анимированный CSS3-слайдер готов. Данный пример можно использовать как лёгкий слайдер, который также будет запускаться и на мобильных устройствах.
Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru (по материалам сайта www.tutorialzine.com)
P.S. Кое-что понятно, но куда двигаться дальше? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, PHP и SQL.
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
