Анимированная фотогалерея с применением CSS3
HTML
Как всегда, первый шаг заключается в создании HTML-разметки. Мы начнем с обычного HTML5-документа, к которому подключим ряд CSS/JS файлов:
Тег UL с id=#photos содержит фотографии, которые мы будем анимировать. Каждую фотографию я поместил внутрь элемента LI с гиперссылкой. Картинка устанавливается как фоновое изображение для ссылки. Как вы увидите ниже в части с CSS-кодом, я использую свойство background-size, чтобы заставить изображение закрыть собой всю ширину и высоту ссылки. При добавлении нескольких фотографий, имейте в виду, что, поскольку они расположены абсолютно, они будут показаны в обратном порядке (последняя фотография будет в верхней части).
В хедере документа, я, помимо наших основных стилей, подключил animate.css - библиотеку, с помощью которой мы создадим эти замечательные CSS3-анимации. Внизу документа мы подключим библиотеку jQuery и script.js, который мы рассмотрим ниже.
JavaScript
Чтобы вызвать какой-либо эффект, который дает нам библиотека animate, мы должны присвоить элементу класс с названием анимации. Нам также нужно перемещать анимированные фотографии в нижнюю часть стопки после завершения анимации, так что бы мы могли показать следующее изображение. Вот то, что нам нужно сделать, чтобы этот пример работал:
Когда клик мыши будет происходить на стрелке "Далее", то будет вызвана случайно выбранная CSS-анимация, имя класса будет присвоено самому верхнему элементу стека (это фактически последний элемент LI из-за абсолютного позиционирования);
Через одну секунду, когда анимация завершится, мы будем перемещать анимированный элемент за остальные элементы LI при помощи метода jQuery - prependTo и удалять классы, которые мы назначили перед этим.
При клике на стрелку "Предыдущая", мы будем делать почти то же самое, с той лишь разницей, что мы будем брать последнее изображение и перемещать его на вершину стека перед запуском анимации.
Кроме того, я также добавил функциональность слайд-шоу, которое будет прекращать автоматические переходы, как только вы нажимаете на одну из стрелок.
Итак, код выглядит следующим образом:
Все, что нам остается сделать, это написать несколько стилей.
CSS
Я не буду показывать здесь все стили, только те, которые отвечают непосредственно за стек фото:
Чтобы изменить продолжительность анимации, вам придется изменить свойство animation-duration. В коде выше, я установил его равным 1 секунде. Другие свойства, которые можно установить для анимации - это animation-delay для задержки перед срабатыванием анимации, и animation-iteration-count для определения числа повторений.
Готово!
Вы можете использовать этот пример в качестве легкого слайд-шоу, которое будет замечательно работать даже на мобильных устройствах.
Как всегда, первый шаг заключается в создании HTML-разметки. Мы начнем с обычного HTML5-документа, к которому подключим ряд CSS/JS файлов:
Код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Анимированная фотогалерея с применением CSS3</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="assets/img/1.jpg"
style="background-image: url('assets/img/1.jpg')">Пейзаж 1</a></li>
<!--Остальные фото здесь -->
</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>
<html>
<head>
<meta charset="utf-8" />
<title>Анимированная фотогалерея с применением CSS3</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="assets/img/1.jpg"
style="background-image: url('assets/img/1.jpg')">Пейзаж 1</a></li>
<!--Остальные фото здесь -->
</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 с id=#photos содержит фотографии, которые мы будем анимировать. Каждую фотографию я поместил внутрь элемента LI с гиперссылкой. Картинка устанавливается как фоновое изображение для ссылки. Как вы увидите ниже в части с CSS-кодом, я использую свойство background-size, чтобы заставить изображение закрыть собой всю ширину и высоту ссылки. При добавлении нескольких фотографий, имейте в виду, что, поскольку они расположены абсолютно, они будут показаны в обратном порядке (последняя фотография будет в верхней части).
В хедере документа, я, помимо наших основных стилей, подключил animate.css - библиотеку, с помощью которой мы создадим эти замечательные CSS3-анимации. Внизу документа мы подключим библиотеку jQuery и script.js, который мы рассмотрим ниже.
JavaScript
Чтобы вызвать какой-либо эффект, который дает нам библиотека animate, мы должны присвоить элементу класс с названием анимации. Нам также нужно перемещать анимированные фотографии в нижнюю часть стопки после завершения анимации, так что бы мы могли показать следующее изображение. Вот то, что нам нужно сделать, чтобы этот пример работал:
Когда клик мыши будет происходить на стрелке "Далее", то будет вызвана случайно выбранная CSS-анимация, имя класса будет присвоено самому верхнему элементу стека (это фактически последний элемент LI из-за абсолютного позиционирования);
Через одну секунду, когда анимация завершится, мы будем перемещать анимированный элемент за остальные элементы LI при помощи метода jQuery - prependTo и удалять классы, которые мы назначили перед этим.
При клике на стрелку "Предыдущая", мы будем делать почти то же самое, с той лишь разницей, что мы будем брать последнее изображение и перемещать его на вершину стека перед запуском анимации.
Кроме того, я также добавил функциональность слайд-шоу, которое будет прекращать автоматические переходы, как только вы нажимаете на одну из стрелок.
Итак, код выглядит следующим образом:
Код
$(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);
});
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);
});
Все, что нам остается сделать, это написать несколько стилей.
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;
}
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 для определения числа повторений.
Готово!
Вы можете использовать этот пример в качестве легкого слайд-шоу, которое будет замечательно работать даже на мобильных устройствах.
-
FalleN -
3364 -
1 -
198
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...