Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Основы работы с фреймворком CakePHP"

Хотите научиться создавать сайты любой сложности быстро?

Познакомьтесь ближе с одним из замечательных фреймворков - CakePHP.

Узнайте о его преимуществах, освойте основные функции и начните применять CakePHP на практике!

Получить в подарок->

Бесплатный Курс "Рисование дизайна сайта с нуля"

Обучающая система для полных новичков в дизайне.

Вы научитесь создавать дизайн любых сайтов - для себя и на заказ.

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

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

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

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

Изучив его, Вы сможете разрабатывать гибкие и функциональные Сайты-Визитки с панелью администратора.

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

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

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

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

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


Анимированный слайдер с СSS 3

Исходники

Пример

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

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

Полученный в конце нашего урока слайдер будет автоматически переходить от фотографии к фотографии.

HTML

Первым делом, для наглядности посмотрим на разметку индексной страницы, которая в сущности является обычной html5 страницей, к которой подключено несколько CSS и JS (javaScript) файлов.

index.html


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

    <title>Animated CSS3 Photo Stack | Tutorialzine Demo</title>

    <!-- Подключаем стили -->
    <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="#" class="arrow previous"></a>
    <a href="#" class="arrow next"></a>

    <!-- Подключаем JavaScript-файлы -->
    <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 и якорем внутри этой ссылки. Изображение же задано свойством background-image для ссылки.

Хостинг

Также мы используем свойство background-size:cover; чтобы изображение автоматически ресайзилось и полностью заполняло собой область, что была определена как область для ссылки. При добавлении новых фотографий учитывайте, что все они позиционируются абсолютно и будут показаны в обратном порядке, т.е. самая последняя фотография будет на самом верху.

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

JavaScript

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

1. Сперва мы будем отслеживать клик по одной из стрелок

2. Затем, как только был произведён клик по стрелке «Вперёд», будет запускаться триггер, случайным образом выбирающий одну из CSS-анимаций из библиотеки animate.css по специально назначенному классу, который будет присвоен самому верхнему элементу списка (на самом деле - самому последнему тегу li, если смотреть относительно вёрстки, из-за позиционирования).

3. После одной секунды, когда анимация будет завершена, мы передвигаем элемент за остальные элементы li с помощью метода библиотеки jQuery prependTo (он будет двигать элементы вниз стека) и удалять класс, что мы назначили до этого.

4. Для стрелки «Назад» будет происходить то же самое, за исключением одного отличия - мы будем передвигать самый «нижний» элемент стека на позицию самого «верхнего» элемента и присваивать ему специальный класс до начала срабатывания анимации.

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

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

});

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

Хостинг

Всё, что нам осталось сделать - это прописать несколько 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 секунду. Вы также можете задать и больше других различных настроек, таких как: задержка анимации, до того как триггер, запускающий анимацию сработал и число итераций одной анимации после определённого количества повторений.

Готово!

Итак, наш анимированный CSS3-слайдер готов. Данный пример можно использовать как лёгкий слайдер, который также будет запускаться и на мобильных устройствах.

Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru (по материалам сайта www.tutorialzine.com)

P.S. Кое-что понятно, но куда двигаться дальше? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, PHP и SQL.

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх