Создай свой собственный бесплатный HTML слайд-шоу. Слайд-шоу с полноэкранным фоном на CSS3

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

Слайд-шоу для сайта

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

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

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

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

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

Подготовка слайд-шоу

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

Подготовка изображений для слайдера

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

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

Создание HTML+CSS каркаса для слайд-шоу

Картинки прописываются в 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-ми слайд-шоу!
Смотрите их "выступление" ниже.

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

1. Растворение ("fade"): Аналогичен верхнему примеру с мотоциклами.
2. Перетасовывание ("shuffle"):
3. Зум ("zoom"):
4. Переворот по осям ("curtainX" или Y): Здесь установил "curtainX" .
5. Сворачивание по вертикали ("turnDown"): Здесь сворачивается вниз, а можно установить и другие виды переходов: turnUP, Left, Right .
6. Скроллинг ("scrollDown"): Смещение. Здесь установил вниз, а кроме этого можно устанавливать: scrollUp, Left, Right .

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

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

СКИНЫ HTML СЛАЙД ШОУ от Cincopa Как это работает

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

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

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

ВЫБЕРИ СКИН HTML СЛАЙД-ШОУ

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

ЗАГРУЗИ МЕДИА ФАЙЛЫ

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

ВСТАВЬ СГЕНЕРИРОВАННЫЙ КОД

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

Зачем пользоваться программой для создания HTML слайд шоу Cincopa?

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

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

ОСНОВНЫЕ ХАРАКТЕРИСТИКИ СЛАЙД-ШОУ HTML:

Совместимость со всеми основными браузерами

Полная масштабируемость

Удаленный доступ

Cooliris вид

Система CDN

Добавьте неограниченное количество файлов - неограниченные квотой вашего сервера

Множество скинов

Автоматические преобразования и изменение размера фотографий

Разрешение или запрещение скачивания ваших файлов

Автоматическое резервное копирование и отчеты

Оптимизированый SEO

Множество вариантов настройки (размер, расположение, перетасование, автоматический поворот и т.д.)

Легкое управление с помощью простого визарда

Бесплатный хостинг и доставка (до 400 Мб памяти и 200 Мб трафика в месяц)

В этом уроке рассмотрим программу для автоматического создания слайд-шоу на технологии HTML5.

Даже если ваши знания в javascript, css и html не позволяют вам создавать слайд-шоу самостоятельно, это можно сделать при помощи программы Hislider . Скачать ее можно по ссылке — Hislider.com . На сайте доступна как бесплатная версия, так и платная. Все действия я буду показывать в бесплатной версии. Если программа вам понравится, вы можете приобрести ее платную версию. Я создал пробное слайд-шоу. Посмотреть вы его можете по ссылке:

СкачатьКак создать первое слайд-шоу с помощью программы Hislider

Когда вы установите и запустите программу перед вами появится окно программы, где предлагается начать создание слайд-шоу. Жмете на кнопку «Create New»:

Указываете необходимую ширину(width) и высоту(height) слайд-шоу:

Затем необходимо добавить изображения. Это можно сделать нажав по центру окна на ссылку либо на кнопку на панели кнопок:

После того как изображения добавлены, станет активна панель с переходами(Transmitions). Переходим на вкладку «Transmitions»:

И добавляете переходы, которые вам нравятся:

Нажимаем «OK» и попадаем в редактор слайд-шоу. Вносим необходимые изменения. Вверху есть три кнопки:

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

Вторая кнопка «PREVIEW» необходима предпросмотра слайд-шоу в браузере.

И последняя кнопка «PUBLISH» служит для создания слайд-шоу.

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

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

Изображения были любезно представлены Марком Себастьяном (), и распространяются они под лицензионным соглашением Creative Commons Attribution-ShareAlike 2.0 Generic.

Учтите, что данный эффект будет работать лишь в браузерах оснащенных .

Верстка

Здесь мы используем неупорядоченный список для слайд-шоу и также добавим span для каждого изображения и отделение с заголовком:

• 
  Image 01
  
  re·lax·a·tion
  
  

Span’ы будут являться элементами с установленным в слайд-шоу фоновым изображением.

CSS-код

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

Cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: "";
background: transparent url(../images/pattern.png) repeat top left;
}
Мы будем использовать текстуру повторяющихся точек, но вы также можете использовать, к примеру, немного прозрачную градацию, реализованную с помощью CSS.

Span, содержащий изображение из слайд-шоу, будет иметь абсолютное позиционирование, а его параметры ширины и высоты будут выставлены на 100%. Так как у нас внутри есть некоторый дополнительный текст, мы сделаем его цвет немного прозрачным, так как нам не нужно обращать на него внимание. Значение параметра background-size будет выставлено на cover – это позволит нам быть уверенными в том, что фоновое изображение покрывает всю область элемента и, следовательно, окно просмотра. Уровень плотности выставлен на 0. Далее мы изменим данный параметр посредством анимации:

Cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
Анимация для каждого span’а будет длиться 36 секунд и запускаться бесконечное число раз. Но давайте немного позже рассмотрим детали, а пока что оформим отделение с заголовком:

Cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: "BebasNeueRegular", "Arial Narrow", Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
Анимация для отделения с заголовком также будет длиться 36 секунд.

Теперь мы определим фоновые изображения для всех span’ов, а также задержку в анимации, чтобы каждое изображение и заголовок в слайд-шоу появлялись через 6 секунд после предыдущего пункта:

Cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
animation-delay: 30s;
}

Cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 30s;
}
Теперь давайте перейдем к анимации в слайд-шоу. У каждого span’а будет анимация, которая продлится 36 секунд. За эти 36 секунд мы изменим уровень плотности с 0 на 1 (это произойдет примерно на 8% прогресса анимации). А затем такое значение уровня плотности продержится вплоть до 17% прогресса. По достижении 25% прогресса, уровень плотности снова должен спуститься к 0, и оставаться таким до самого конца.

Почему именно такие значения? Нам нужно, чтобы каждое изображение было видно всего 6 секунд, и мы знаем, что в конце цикла нам нужно, чтобы снова было отображено первое изображение. У нас всего 6 изображений, и именно поэтому нам понадобится 36 секунд для всего цикла. Теперь нам нужно распределить уровни плотности соответствующим образом. Зная, что наше второе изображение начнет изменяться на 6 секунде, нам нужно узнать процентный показатель, который займет эта анимация в случае с первым изображением. Делим 6 на 36, и получаем 0.166… что означает, что наш порог в кадрах придется на 16%. Теперь, так как нам не нужно, чтобы изображение постоянно исчезало, мы определяем следующий порог – inbetween, который составит половину того, что мы высчитали, то есть – 8%. Это тот период, когда нам нужно отобразить полноценное изображение, а исчезать оно должно начать на 17%, и полное исчезновение должно произойти на 25%.

@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
То же самое нужно проделать с заголовком, только нужно сделать, чтобы исчезал он немного быстрее. Следовательно, уровень плотности должен прийти к 0 уже на 19% прогресса:

@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
Что касается браузеров без поддержки анимации, то в подобном случае мы просто отображаем последнее изображение из слайд-шоу за счет выставления уровня плотности span’а на 1:

No-cssanimations .cb-slideshow li span{
opacity: 1;
}
Класс no-cssanimations добавляется с помощью Modernizr.

Теперь давайте также позаботимся о размере шрифта для заголовков для тех случаев, когда размер окна просмотра будет меньше. Мы используем media queries для того, чтобы сделать шрифт меньше при определенной ширине:

@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
И на этом с разработкой упрощенной версии слайд-шоу закончено! Теперь давайте посмотрим, каким образом мы можем улучшить переходы.

Пример с альтернативной анимацией

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

Следующая анимация подразумевает под собой увеличение изображения и его последующее незначительное вращение:

@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
Заголовок будет выезжать с правой стороны (нам нужно будет изменить значение параметра text-align у заголовка на right), а затем исчезать, сдвигаясь влево:

@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
Не забывайте, что вариантов может быть множество, главное не бояться экспериментировать!

Демо

Здесь можно видеть несколько вариантов применения анимации.

Плагин для создания красивейших слайдеров - iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.

04.03.2013 1 692

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

01.02.2013 1 153

Плагин jQuery.popeye это элегантное и красивое решение для показа галереи изображении не покидая страницы. На странице отображается только одно фото, при наведении появляется возможность пролистать или увеличить все изображения в данном наборе. Плагин прост в установке и настройке и разрабатывался, как альтернатива часто использующихся lightbox2, fancybox или colorbox, которые используют модальные окна.

23.11.2012 7 286

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

12.09.2012 4 667

Mobilyslider - простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и др.

07.06.2012 1 403

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

09.05.2012 778

Слайдшоу на jQuery с музыкальным сопровождением с помощью кросс платформенной библиотеки jPlayer. Смена слайдов происходит в указанные промежутки музыкальной композиции.

04.05.2012 892

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

03.05.2012 2 061

Плагин слайдшоу базирующийся на jQuery и плагине easing. Добавлена возможность прокрутки слайдов с помощью колесика мышки. На демо страницах представлены различные варианты использования навигации по слайдам.

12.04.2012 1 387

Используя jmpress, сделаем jquery плагин для создания слайдшоу с интересными 3D эффектами для слайдов.