Фотолаборатория. Создай свой собственный бесплатный HTML слайд-шоу

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

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

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

Верстка

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

• 
  Image 01
  
  re·lax·a·tion
  
  

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 }
}
Не забывайте, что вариантов может быть множество, главное не бояться экспериментировать!

Демо

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

Большое эффектное слайд-шоу с использованием 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.

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

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

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

Когда пользователь хочет перейти к следующему слайду, элемент canvas выводится на экран с помощью анимации fadeIn , создавая плавный эффект перехода.

Начнем с создания разметки HTML.

Слайд шоу на основе элемента HTML5 сanvas и jQuery | Демонстрация для сайта сайт

Разметка для слайдшоу очень проста. Основной элемент div #slideshow содержит неупорядоченный список и стрелки на следующий и предыдущий слайды. Неупорядоченный список содержит слайды, которые определены как элементы li . На иллюстрации выше показано, что элемент canvas с модифицированным изображением будет вставляться сюда.

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

Все стили для слайдшоу содержатся в файле styles.css . Мы используем id основного элемента #slideshow в качестве определения пространства имен, поэтому можно просто добавить данные стили к вашему проекту без риска конфликта имен.

#slideshow{ background-color:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; } #slideshow ul{ height:320px; left:10px; list-style:none outside none; overflow:hidden; position:absolute; top:10px; width:620px; } #slideshow li{ position:absolute; display:none; z-index:10; } #slideshow li:first-child{ display:block; z-index:1000; } #slideshow .slideActive{ z-index:1000; } #slideshow canvas{ display:none; position:absolute; z-index:100; } #slideshow .arrow{ height:86px; width:60px; position:absolute; background:url("img/arrows.png") no-repeat; top:50%; margin-top:-43px; cursor:pointer; z-index:5000; } #slideshow .previous{ background-position:left top;left:0;} #slideshow .previous:hover{ background-position:left bottom;} #slideshow .next{ background-position:right top;right:0;} #slideshow .next:hover{ background-position:right bottom;}

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

• Те, у кого отключен JavaScript . Такие пользователи будут видеть только первый слайд, у них не будет возможности переключиться на другие слайды.
• Те, у кого включен JavaScript, но отсутствует поддержка элемента canvas . Для таких посетителей слайды будут переключаться мгновенно без эффекта перехода.
• Те, у кого включена поддержка JavaScript и поддерживается элемент canvas . Эта группа использует последние версии Firefox, Safari, Chrome, Opera. Они будут видеть слайдшоу во всей красе.

Правила разработаны с учетом первых двух групп. С помощью селектора first-child будет выводиться только первый слайд по умолчанию.

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

$(window).load(function(){ // Мы используем событие window.load, поэтому уверены, что // изображения слайдшоу загружены без ошибок. // Проверяем, поддерживает ли текущий браузер элемент canvas: var supportCanvas = "getContext" in document.createElement("canvas"); // Манипуляции с элементом canvas создают интенсивную нагрузку на процессор, // поэтому мы используем setTimeout, чтобы сделать работу асинхронной и улучшить // время отклика страницы var slides = $("#slideshow li"), current = 0, slideshow = {width:0,height:0}; setTimeout(function(){ window.console && window.console.time && console.time("Сгенерировано за:"); if(supportCanvas){ $("#slideshow img").each(function(){ if(!slideshow.width){ // Получаем размеры первого изображения: slideshow.width = this.width; slideshow.height = this.height; } // Выводим модифицированную версию изображения createCanvasOverlay(this); }); } window.console && window.console.timeEnd && console.timeEnd("Сгенерировано за:"); $("#slideshow .arrow").click(function(){ var li = slides.eq(current), canvas = li.find("canvas"), nextIndex = 0; // В зависимости от того, какая стрелка была нажата, // вычисляем индекс следующего слайда if($(this).hasClass("next")){ nextIndex = current >= slides.length-1 ? 0: current+1; } else { nextIndex = current