Site icon Vavik96

Анимированная CSS3 галерея с разнообразными эффектами

admin

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




Анимированная CSS3 галерея с разнообразными эффектами

HTML

Начнем, как всегда, с HTML разметки. Создадим обычный HTML5 документ, в котором подключим необходимые файлы:

<!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>
        <!-- еще фото -->
    </ul>
 
    <a href="#"></a>
    <a href="#"></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>

 

Элемент #photos содержит все фото. Для каждой картинки определен тег <li>, в котором содержится ссылка на фотографию. Фотографии служат в качестве фона (свойство background-image) для каждой ссылки. Мы будем использовать свойство background-size для того, чтобы картинка заняло все пространство ссылки.

В HTML документе мы подключаем animate.css — главный CSS файл библиотеки, содержащей анимацию для смены картинок в галереи. Перед закрытием тега <body> подключаем jQuery и script.js, о котором поговорим ниже.

JavaScript

Для применения эффектов библиотеки animate library необходимо назначить CSS класс с названием анимации элементу, который хотим анимировать. После анимации нам надо будет переместить картинку в конец списка и показать следующее изображение. Рассмотрим по пунктам, что нам необходимо сделать:

В результате у нас получится стек из фотографий.




Также мы сделаем автоматическую смену изображений, что позволит использовать данный пример в качестве сладера.

$(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 = 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);
 
});

 

В примере использованы не все возможные анимации, весь список можно найти на github.

Осталось только написать CSS для нашего примера.

CSS

Рассмотрим толь ко ту часть 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 секунда.

Готово! Вы можете использовать этот пример совместно с PHP и автоматически формировать список фото

 

Оригинал

Exit mobile version