—»     —»   Анимированная стопка фотографий на CSS3
  Раздел: Анимация   Нет комментариев  

Анимированная стопка фотографий на CSS3



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

Анимированная стопка фотографий на CSS3

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, о которым мы поговорим далее.

Анимированная стопка фотографий на CSS3

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 для установки количества повторов.

Готово!

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, фотография, слайд-шоу
Опубликовал Design FactoRy   Прочитано (раз): 8659   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Манжета гидроцилиндра
Гидроцилиндры, штоки, поршни, трубы, уплотнения и др
rgc-trade.com
На сайте http://www.origotex.ru купить постельное белье жаккард евро.
origotex.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2017    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031