Веб-программирование

Анимированная фотогалерея с применением CSS3

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

Admin
14 марта 2013

Анимированная фотогалерея с применением CSS3

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

HTML

Как всегда, первый шаг заключается в создании 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="http://www.flickr.com/photos/brockwhittaker/8500935165/" style="background-image: url(/...)">Пейзаж 5</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);
 
});

Я не использовал все эффекты, которые предоставляет animate.css, но вы можете найти их полный список на GitHub странице.

Все, что нам остается сделать, это написать несколько стилей.

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

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

animated-css3-photo-stack.zip 10 kB (31 скачивание)

Источник

Комментарии 0

Новый комментарий

Для редактирования комментария осталось 10 минут

Комментарии отсутствуют