Как задавать автоматический слайдшоу на языке html. Интерактивные карты мира и Европы и США

• Перевод
• Tutorial

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

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

Мы можем использовать четыре свойства перехода:

Transition-property
Определяет имя (имена) свойств CSS, к которым должны быть применены переходы.

Transition-duration
Определяет время, за которое должен произойти переход.

Transition-timing-function
Определяет, как вычислены промежуточные значения перехода.

Transition-delay
Определяет, когда переход запускается.

В настоящее время переходы CSS3 поддерживаются в Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ и IE 10. Поскольку технология все еще относительно новая, то необходимы префиксы для браузеров . Синтаксис одинаков для всех браузеров за исключением добавлениея необходимых префиксов. Мы опустим их в этой статье, но не забудем включить префиксы в код.

Давайте посмотрим, как применить простой переход к ссылке:
a { color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: ease-in; transition-delay: 0.3s; } a:hover { color: #fff; }

Присваивая анимацию элементу, вы можете также использовать сокращеную форму:
a { color: #000; transition: color 0.7s ease-in 0.3s; } a:hover { color: #fff; }

У свойства анимации есть восемь подсвойств:

Animation-delay
Определяет, когда анимация запускается.

Animation-direction
Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.

Animation-duration
Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.

Animation-iteration-count
Определяет количество циклов анимации перед остановкой.

Animation-name
Определяет имя правила в @keyframes.

Animation-play-state
Определяет, проигрывается ли анимация или приостановлена.

Animation-fill-mode
Определяет, как CSS-анимация должна применить стили к своей цели до и после выполнения.

Давайте посмотрим, как применить простую анимацию к блоку:
/* Элемент, к которому мы применяем анимацию. */ div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; -moz-animation-name: move; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -moz-animation-delay: 0.5s; -moz-animation-iteration-count: 2; -moz-animation-direction: alternate; -webkit-animation-name: move; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; } /* Код самой анимации. */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } @-moz-keyframes move { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100px); } } @-webkit-keyframes move { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100px); } }

Мы можем использовать сокращенную запись, чтобы задать сразу все свойства анимации:
div { animation: move 1s ease-in-out 0.5s 2 alternate; -moz-animation: move 1s ease-in-out 0.5s 2 alternate; -webkit-animation: move 1s ease-in-out 0.5s 2 alternate; }

/* Анимация от 0% до 100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* Анимация с промежуточным кадром */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }

У W3C есть много полезной и подробной информации про “CSS3-анимацию ”

Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения.
Анимация очень проста: изображение следует по заданному направлению, изменяя свойства " top ", " z-index " и " opacity ".
Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.

• Cougar
• Lions
• Snowalker
• Howling
• Sunbathing

Div id="slider"
Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.

Div id="mask"
Мы будем использовать этот блок, чтобы скрыть всё, что происходит за пределами слайдера. В дополнение к этому, маска позволяет нам отображать содержание слайдера.

Li id="first" class="firstanimation"
У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.

Div class="tooltip"
Этот блок выводит на экран заголовок изображения. Можете изменить его в зависимости от потребностей, например, делая его кликабельным или добавляя краткое описание.

Div class="progress-bar"
Этот блок содержит функцию, которая показывает прогресс выполнения анимации.

Теперь пришло время к формированию CSS-файла.

/* Структура слайдера */ #slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }

Класс " mask " скроет все элементы, которые расположены за пределами слайдера. Его высота должна быть равной высоте слайдера.

/* Прячем все за пределами слайдера */ #mask { overflow: hidden; height: 320px; }

Наконец, чтобы отсортировать список изображений, будем использовать " position: absolute " и " top: -325px " так, чтобы все изображения были расположены за пределами слайдера.

/* Список изображений */ #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 680px; /* Ширина изображения */ height: 320px; /* Высота изображения */ position: absolute; top: -325px; /* Исходное положение (за пределами слайдера) */ list-style: none; }

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

Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации.
Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде.
Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления:
Определяем общее количество изображений, в слайдере: 5 ;
Определяем продолжительность анимации для каждого изображения: 5 секунд ;
Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд ;
Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде.
Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4% ,
В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.

Со всей этой математикой мы можем теперь применить CSS-анимацию к слайдеру. Мы можем поместить анимацию в бесконечный цикл, т.к. для каждого изображения будет задана отдельная анимация, не зависящая от остальных изображений.

#slider li.firstanimation { animation: cycle 25s linear infinite; } #slider li.secondanimation { animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { animation: cyclefive 25s linear infinite; }

Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение.
Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл.
Я добавил свойства " opacity " и " z-index ", чтобы сделать переход от одного изображения к следующему более привлекательным.
Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.

Вот весь код для анимаций:
/* Анимация */ @keyframes cycle { 0% { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */ 4% { top: 0px; } /* Стартовая позиция */ 16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */ 20% { top: 325px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/ 21% { top: -325px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */ 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -325px; opacity: 0; } /* Исходная позиция за пределами маски */ 16% { top: -325px; opacity: 0; }/* Начало движения с 16% */ 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } /* С 20% до 24% (в течении 1 секунды) - вход*/ 36% { top: 0px; opacity: 1; z-index: 0; } /* С 24% до 36 % (3 секунды) изображение видимо */ 40% { top: 325px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)- выход */ 41% { top: -325px; opacity: 0; z-index: -1; } /* Возврат на исходную позицию */ 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100%{ top: 325px; opacity: 0; z-index: 0; } }

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

Процесс анимации индикатора выполнения совпадает с тем, что был для слайдера. Создаем сам индикатор выполнения:

/* Индикатор выполнения */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }

Не бойтесь синтаксиса. Тут есть такая же функция как «from to». Вы можете увидеть, что ключевые кадры устанавливают появление и исчезновение каждого изображения.

/* Строка состояния анимации */ @keyframes fullexpand { /* В этих ключевых кадрах анимация стационарна */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /* В этих - оживает */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /* В этих - плавно заполняется */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /* В этих ключевых кадрах индикатор выполнения завершил свой путь */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /* В этих ключевых кадрах индикатор выполнения исчезнет, а затем возобновит цикл */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }

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

Стили для подсказок:
#slider .tooltip { background: rgba(0,0,0,0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; } #slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 10px; }

Здесь мы сделали видимыми только заголовки изображений, но вы можете сделать так же для любого текста, ссылок и всего, чего захотите.

Мы увидели, как применить CSS3-переходы к элементам, теперь давайте сделаем их для подсказок.
Если помните, мы добавили ID к каждому списку («first», «second», и т.д.), чтобы при наведении каждая подсказка была связана с отдельным изображением, при этом не появлялись все подсказки сразу.

#slider .tooltip { … transition: all 0.3s ease-in-out; } #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip { left: 0px; }

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

#slider: hover li, #slider: hover .progress-bar { animation-play-state: paused; }

От переводчика:
Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.

Теги: Добавить метки

• Перевод
• Tutorial

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

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

Мы можем использовать четыре свойства перехода:

Transition-property
Определяет имя (имена) свойств CSS, к которым должны быть применены переходы.

Transition-duration
Определяет время, за которое должен произойти переход.

Transition-timing-function
Определяет, как вычислены промежуточные значения перехода.

Transition-delay
Определяет, когда переход запускается.

В настоящее время переходы CSS3 поддерживаются в Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ и IE 10. Поскольку технология все еще относительно новая, то необходимы префиксы для браузеров . Синтаксис одинаков для всех браузеров за исключением добавлениея необходимых префиксов. Мы опустим их в этой статье, но не забудем включить префиксы в код.

Давайте посмотрим, как применить простой переход к ссылке:
a { color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: ease-in; transition-delay: 0.3s; } a:hover { color: #fff; }

Присваивая анимацию элементу, вы можете также использовать сокращеную форму:
a { color: #000; transition: color 0.7s ease-in 0.3s; } a:hover { color: #fff; }

У свойства анимации есть восемь подсвойств:

Animation-delay
Определяет, когда анимация запускается.

Animation-direction
Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.

Animation-duration
Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.

Animation-iteration-count
Определяет количество циклов анимации перед остановкой.

Animation-name
Определяет имя правила в @keyframes.

Animation-play-state
Определяет, проигрывается ли анимация или приостановлена.

Animation-fill-mode
Определяет, как CSS-анимация должна применить стили к своей цели до и после выполнения.

Давайте посмотрим, как применить простую анимацию к блоку:
/* Элемент, к которому мы применяем анимацию. */ div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; -moz-animation-name: move; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -moz-animation-delay: 0.5s; -moz-animation-iteration-count: 2; -moz-animation-direction: alternate; -webkit-animation-name: move; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; } /* Код самой анимации. */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } @-moz-keyframes move { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100px); } } @-webkit-keyframes move { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100px); } }

Мы можем использовать сокращенную запись, чтобы задать сразу все свойства анимации:
div { animation: move 1s ease-in-out 0.5s 2 alternate; -moz-animation: move 1s ease-in-out 0.5s 2 alternate; -webkit-animation: move 1s ease-in-out 0.5s 2 alternate; }

/* Анимация от 0% до 100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* Анимация с промежуточным кадром */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }

У W3C есть много полезной и подробной информации про “CSS3-анимацию ”

Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения.
Анимация очень проста: изображение следует по заданному направлению, изменяя свойства " top ", " z-index " и " opacity ".
Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.

• Cougar
• Lions
• Snowalker
• Howling
• Sunbathing

Div id="slider"
Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.

Div id="mask"
Мы будем использовать этот блок, чтобы скрыть всё, что происходит за пределами слайдера. В дополнение к этому, маска позволяет нам отображать содержание слайдера.

Li id="first" class="firstanimation"
У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.

Div class="tooltip"
Этот блок выводит на экран заголовок изображения. Можете изменить его в зависимости от потребностей, например, делая его кликабельным или добавляя краткое описание.

Div class="progress-bar"
Этот блок содержит функцию, которая показывает прогресс выполнения анимации.

Теперь пришло время к формированию CSS-файла.

/* Структура слайдера */ #slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }

Класс " mask " скроет все элементы, которые расположены за пределами слайдера. Его высота должна быть равной высоте слайдера.

/* Прячем все за пределами слайдера */ #mask { overflow: hidden; height: 320px; }

Наконец, чтобы отсортировать список изображений, будем использовать " position: absolute " и " top: -325px " так, чтобы все изображения были расположены за пределами слайдера.

/* Список изображений */ #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 680px; /* Ширина изображения */ height: 320px; /* Высота изображения */ position: absolute; top: -325px; /* Исходное положение (за пределами слайдера) */ list-style: none; }

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

Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации.
Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде.
Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления:
Определяем общее количество изображений, в слайдере: 5 ;
Определяем продолжительность анимации для каждого изображения: 5 секунд ;
Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд ;
Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде.
Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4% ,
В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.

Со всей этой математикой мы можем теперь применить CSS-анимацию к слайдеру. Мы можем поместить анимацию в бесконечный цикл, т.к. для каждого изображения будет задана отдельная анимация, не зависящая от остальных изображений.

#slider li.firstanimation { animation: cycle 25s linear infinite; } #slider li.secondanimation { animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { animation: cyclefive 25s linear infinite; }

Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение.
Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл.
Я добавил свойства " opacity " и " z-index ", чтобы сделать переход от одного изображения к следующему более привлекательным.
Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.

Вот весь код для анимаций:
/* Анимация */ @keyframes cycle { 0% { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */ 4% { top: 0px; } /* Стартовая позиция */ 16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */ 20% { top: 325px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/ 21% { top: -325px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */ 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -325px; opacity: 0; } /* Исходная позиция за пределами маски */ 16% { top: -325px; opacity: 0; }/* Начало движения с 16% */ 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } /* С 20% до 24% (в течении 1 секунды) - вход*/ 36% { top: 0px; opacity: 1; z-index: 0; } /* С 24% до 36 % (3 секунды) изображение видимо */ 40% { top: 325px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)- выход */ 41% { top: -325px; opacity: 0; z-index: -1; } /* Возврат на исходную позицию */ 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100%{ top: 325px; opacity: 0; z-index: 0; } }

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

Процесс анимации индикатора выполнения совпадает с тем, что был для слайдера. Создаем сам индикатор выполнения:

/* Индикатор выполнения */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }

Не бойтесь синтаксиса. Тут есть такая же функция как «from to». Вы можете увидеть, что ключевые кадры устанавливают появление и исчезновение каждого изображения.

/* Строка состояния анимации */ @keyframes fullexpand { /* В этих ключевых кадрах анимация стационарна */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /* В этих - оживает */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /* В этих - плавно заполняется */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /* В этих ключевых кадрах индикатор выполнения завершил свой путь */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /* В этих ключевых кадрах индикатор выполнения исчезнет, а затем возобновит цикл */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }

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

Стили для подсказок:
#slider .tooltip { background: rgba(0,0,0,0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; } #slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 10px; }

Здесь мы сделали видимыми только заголовки изображений, но вы можете сделать так же для любого текста, ссылок и всего, чего захотите.

Мы увидели, как применить CSS3-переходы к элементам, теперь давайте сделаем их для подсказок.
Если помните, мы добавили ID к каждому списку («first», «second», и т.д.), чтобы при наведении каждая подсказка была связана с отдельным изображением, при этом не появлялись все подсказки сразу.

#slider .tooltip { … transition: all 0.3s ease-in-out; } #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip { left: 0px; }

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

#slider: hover li, #slider: hover .progress-bar { animation-play-state: paused; }

От переводчика:
Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.

Теги:

• CSS3
• слайд-шоу

Запретив использование JavaScript, Вы не сможете видеть интересные примеры слайд-шоу!

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

И это не случайно!

**Примечание. В отличие от других страниц раздела jQuery , нужные скрипты прописал непосредственно в HTML-код самой этой страницы .
Кроме того, что очень важно(!) , они работают у меня от другой версии jQuery , более поздней, чем использую здесь.

Если там использую версию jquery v.1.10.1.min , то здесь v.1.8.3.min

Однако, подробнее об этом и обо всём остальном, по-порядку - дальше.

Работа по созданию и установке слайд-шоу на сайте обычно состоит из 4-ёх основных этапов.

1. Подобрал фотографии. Главное - чтобы они были обязательно одного размера . Нужно их тщательно измерить.
В данном случае, взял готовые картинки из дополнительных материалов, приложенных к обучающему курсу. Какому? Об этом здесь: "Ссылки" (откроется в новом окне) .

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

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

Разместил сами изображения внутри тэга p , для которого установил в стилях CSS ширину и высоту, и указал его class="slideshow" . А сам абзац с ними поместил внутрь общего тэга div , на фон которого повесил подготовленное графическое изображение слайдера (телевизор* ). Ему дал class="slider_fon" .
Причём, только для него , чтоб разгрузить страницу, подключил внешнюю таблицу стилей, а для рисунков всё делал внутри HTML-кода .

P.S.** Последнее действие вовсе НЕ обязательно. Просто, мне так удобнее. Структура страницы логичнее как-то выглядит.

В правилах CSS указал размер окна для изображений, которые потом будут появляться в слайдере (width - height ) . Естественно, у всех изображений должен быть одинаковый размер .
При желании, мог расширить CSS-параметры , добавив, скажем, рамки, фон, отступы и прочие элементы. Однако, думаю, это уже было бы лишним.

Если же, всё-таки, Вам захочется так сделать, то, размеры указывайте ОБЩИЕ , то есть: изображение + ВСЕ установленные отступы и границы .

Рекомендую посетить справочную страницу , которую делал для себя во время изучения технологии jQuery. Очень поможет Вам разобраться.
Открыл к ней общий доступ: "ВЫБОРКА в jQuery" (откроется в новом окне) .

Как всегда, сначала создал папку js на сайте. Затем скачал нужные скрипты для слайд-шоу (архив ), и распаковал его в эту папку. В ней получилось два файла скриптов: ядро jquery-1.8.3.min.js и плагин jquery.cycle.all.min.js .

В неё же, на всякий случай, добавил и свой управляющий файл myscripts11.js . Однако, здесь он мне не пригодился для запуска и демонстрации слайд-шоу. Разве что, проверил им правильное подключение созданной папки.
Но... ..., пусть будет. Мало ли, что в дальнейшем захочу сделать с размещёнными здесь слайдерами. Короче, "... наш бронепоезд всегда на запасном пути" .

Дальше. Внутрь тэга ... вставил строчки, где прописал пути к скриптам. У меня они: , и к плагину: .
Свой ("запасной") управляющий файл закомментировал .

И последнее -

Зашедшие на мой сайт с отключённым в браузере интерпретатором JavaScript , наблюдать слайд-шоу , разумеется, не смогут .
Они увидят рисунки так, как те прописаны в HTML-коде , т.е. в столбик, друг за другом.
Для них сделал строчку-предупреждение и вставил её в тэг ... .

Ну вот! Слайд-шоу создано. Осталось настроить его параметры: скорость смены рисунков, способы их показа, и т.д..

Как уже писал выше, (в примечании** ), нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
В созданном у себя на сайте слайд-шоу, применил настройки "по умолчанию" .

Вообще же, легко установить различные, интересные типы переходов между картинками, изменяя javascript , размещённый в теле страницы.
Скажем, изменив в скрипте строчку sync: false на sync: true , можно убрать пробел при смене изображений.

Важное замечание!
Разные версии jQuery могут конфликтовать друг с другом, если они на одной странице.
Обязательно(!) проверяйте работу плагинов с установленной версией jQuery , поскольку не все версии сочетаются!

Пример**
На других страницах раздела jQuery , использующих библиотеку, установлена версия jquery v.1.10.1.min . Так вот, она более современная, чем v.1.8.3.min , от которой исправно(!) работают слайдеры слайд-шоу здесь.

Плагин jquery.cycle.all.min.js с ней НЕ РАБОТАЕТ!!!
(проверено )

Впрочем, не огорчайтесь. Всё в Ваших руках!
В разделе моего сайта "Полезное" (откроется в новом окне) найдёте испытанный(!) полный комплект нужных скриптов для создания такого слайд-шоу на своём сайте. (Разумеется, БЕСПЛАТНО!)

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

Если хотите разместить различные варианты слайд-шоу на одной странице сайта, как я это сделал здесь (увидите ниже ), указывайте разные классы для каждого варианта в строчке скрипта $(".slideshow ").cycle({

P.S.* Не забудьте прописать в CSS размеры окна для каждого класса , если, всё же, будете использовать таблицу стилей . Мне она не понадобилась.

Посмотрите сначала на неподвижные рисунки, которые, аналогично, взял из обучающего курса (Какого? Повторю ссылку: "Ссылки" ) , и разместил их здесь для сравнения.

Вот они. Будущие участники 7-ми слайд-шоу!
Смотрите их "выступление" ниже.

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

HTML слайд шоу из фотографий легко добавит блеска вашей странице и вы получите внимание как посетителей, так и поисковых систем. Cincopa предлагает вам несколько потрясающих и быстро настраиваемых скинов, которые позволят показать многочисленные фотографии или видео на относительно небольшом пространстве и без использования квоты сервера, благодаря бесплатному хостингу и доставке (пакет которого может быть увеличен за определенную оплату). Вся процедура создания и вставки слайд шоу HTML занимает несколько минут и очень легко завершается, даже если у вас нулевые знания в области программирования.

HTML слайдер из фотографий Cincopa является удивительно эффективным, надежным и привлекательным. Технические требования выполняются автоматически программой для создания слайд шоу, и все, что вам действительно нужно сделать, чтобы создать слайд шоу HTML, просто загрузить высококачественные мультимедийные файлы. Эти файлы могут быть загружены с любого из ваших устройств или из социальных сетей, таких как Facebook или Instagram.

1 Выбери один из наших удивительных скинов

2 Загрузи свои файлы на,облако” Cincopa

3 Получи простой код и вставь на своем сайте

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

Вы можете загрузить столько файлов, сколько вы хотите с вашего рабочего стола, портативных устройств или непосредственно из веб-камеры, а также из любого внешнего веб-источника. Организуйте ваши файлы на,облаке” Cincopa; Cincopa позаботиться о преобразование ваших фотографий, изменение размера и других адаптаций. Дизайн HTML слайд-шоу может быть изменен позже из любого вашего устройства.

Простой пошаговый интерфейс Cincopa предложит вам выбрать способ; это означает, что если вы управляете сайтом на основе HTML вы должны выбрать вариант “слайд-шоу HTML”. Скопируйте строку кода, созданную с помощью приложения и вставьте его в любом месте на вашем сайте.

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

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

Большое эффектное слайд-шоу с использованием jQuery технологий.

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

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

При наведении курсора на стрелки навигации появляется круглая миниатюра следующего слайда.

jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.

Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.

На демонстрационной странице в разделе «examples» вы сможете найти ссылки на все возможные варианты использования этого плагина.

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

Простой в использовании JQuery плагин для создания слайд-шоу.

Легкий jQuery плагин в различном исполнении. Предусмотрена автоматическая смена слайдов.

Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.

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

Свежий слайдер. jQuery слайдер с различными эффектами смены изображений.

Легкий слайдер с автоматической сменой слайдов.

Слайдер с автоматической сменой изображений.

Плагин для реализации слайд-шоу с автоматической сменой слайдов. Есть возможность управлять показом с помощью миниатюр изображений.

jQuery CSS слайдер изображений с использованием плагина NivoSlider .

Плагин для ротации содержимого. Три варианта использования: без навигации (с автоматической сменой в формате слайд-шоу), с навигацией в виде кнопок, с навигацией в виде миниатюр изображений.

Свежий jQuery плагин для оформления портфолио фотографа. В галерее реализован интересный эффект смены изображений. Фотографии сменяют друг друга с эффектом похожим на работу затвора объектива.

Реализация слайдера изображений с использованием javascript и CSS.

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

Легкий слайдер «Slider Kit». Слайдер представлен в различном исполнении: вертикальный и горизонтальный. Также реализованы различные виды навигации между изображениями: с помощью кнопок «Вперед» и «Назад», с помощью колеса мыши, с помощью клика мыши по слайду.

Галерея «Slider Kit». Прокрутка миниатюр осуществляется как в вертикальном так и горизонтальном направлении. Переход между изображениями осуществляется с помощью: колеса мыши, щелчка мыши или наведения курсора на миниатюру.

Вертикальный и горизонтальный слайдер контента на jQuery.

Слайд-шоу с автоматической сменой слайдов.

Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.

jQuery слайд-шоу с миниатюрами.

Слайд-шоу с кнопками навигации.

jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.

Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 - Demo #6 расположенным сверху на демонстрационной странице.

Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.

Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

Анимированная jQuery галерея.

Легкое слайд-шоу на jQuery c автоматической сменой слайдов.

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

Легкий сладер изображений на jQuery. Очень много вариантов реализации: горизонтальная и вертикальная смена изображений, со ссылками на номер слайда и без них, с подписями изображений и без, различные эффекты смены изображений. Есть функция автоматической смены слайдов. Ссылки на все примеры реализации можно найти на демонстрационной странице .

Слайд-шоу с миниатюрами поддерживает режим автоматической смены слайдов.

Слайдер с множеством эффектов смены изображений.

Стильный слайдер изображений на jQuery.

jQuery HTML5 cлайд-шоу, растягивающееся на всю ширину экрана со звуковым сопровождением.

Простое слайд-шоу на jQuery.