Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Анимируем стопку фотографий эффектами CSS3


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


    HTML

    Как всегда мы начнём с разметки. Наш пример будет написан на HTML5, с некоторыми подключениями CSS и JavaScript файлов.

    index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Анимируем стопку фотографий посредством CSS3 | Демонстрационный пример</title>

    <!-- Подключаем необходимые CSS -->
    <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(/zhitelyam/...)">Landscape 5</a></li>
        <!-- More photos here -->
    </ul>

    <a href="#" class="arrow previous"></a>
    <a href="#" class="arrow next"></a>

    <!-- Библиотеки -->
    <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. Как вы увидите в части где мы будем разбираться с CSS, я с помощью свойства background-size назначу высоту и ширину ссылки, согласно размерам изображения. При добавлении фотографий, имейте в виду, что они расположены абсолютно, а значит показываться будут в обратном порядке (последняя фото будет сверху).

    В разделе документа head, вместе с нашим стилем, я подключил библиотеку стилей animate.css, что даст нам замечательные эффекты CSS3 анимации. Перед закрытием тега body, мы подключаем библиотеку jQuery и наш скрипт script.js, о котором я расскажу ниже.

    JavaScript

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

  1. Во-первых, мы будем отлавливать клики мыши;
  2. Если клик произошёл, мы произвольно анимируем фотографию выбранной CSS-анимацией, назначив необходимый класс верхнему элементу стопки (последнему, т.к. мы позиционируем  абсолютно);
  3. Спустя одну секунду, по прошествии анимации, мы передвинем бывший анимированный элемент в конец с помощью prependTo jQuery метода, и удалим класс назначенный выше;
  4. Со следующим элементом мы будем делать почти то же самое, с той лишь разницей, что эффект будет назначен другой, не забываем переместить его на верх стопки.

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

    Вот как выглядит код:

    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);

});

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

    Все, что нам остается сделать, - это написать несколько стилей 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 для числа повторений.

    Конец

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

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 02.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 618
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: