Анимированный слайдер с С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, нам нужно передать имя класса элементу с названием анимации. Нам также нужно передвинуть анимируемое изображение в конец стека по окончанию анимации, таким образом показав следующее изображение, идущее по списку. Вот что нам нужно, чтобы данный пример заработал:
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
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.
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
