Сегодня мы расскажем вам о том, как создать полноэкранный слайд-шоу с фоном, используя только лишь код CSS. Мы используем различные эффекты для переходов между изображениями, а также сделаем появляющийся заголовок посредством анимации, реализованной на CSS.
Изображения были любезно представлены Марком Себастьяном (), и распространяются они под лицензионным соглашением Creative Commons Attribution-ShareAlike 2.0 Generic.
Учтите, что данный эффект будет работать лишь в браузерах оснащенных .
Верстка
Здесь мы используем неупорядоченный список для слайд-шоу и также добавим span для каждого изображения и отделение с заголовком:
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 }
}
Не забывайте, что вариантов может быть множество, главное не бояться экспериментировать!
Демо
Здесь можно видеть несколько вариантов применения анимации.
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:Вероятно, что вы уже слышали о новом элементе HTML5 canvas . Это специальный элемент, который позволяет создавать и модифицировать графику. К тому же, мы можем использовать его как любой другой элемент на странице - применять анимации jQuery для него, обрабатывать события для него и интегрировать его в шаблон.
Обычно использование элемента canvas ограничивается играми и концептуальными демонстрациями. В данном уроке мы будем использовать его практично - сделаем слайдшоу с отличным эффектом перехода, которое будет работать и в старых браузерах.
С помощью JavaScript сделаем специальный фильтр для каждого изображения в слайдшоу. Мы будем создавать новую версию изображения с более высоким контрастом и более яркими цветам, и сохранять ее в элементе canvas.
Когда пользователь хочет перейти к следующему слайду, элемент canvas выводится на экран с помощью анимации fadeIn , создавая плавный эффект перехода.
HTMLНачнем с создания разметки HTML.
html5-slideshow.htmlСлайд шоу на основе элемента HTML5 сanvas и jQuery | Демонстрация для сайта сайт
Разметка для слайдшоу очень проста. Основной элемент div #slideshow содержит неупорядоченный список и стрелки на следующий и предыдущий слайды. Неупорядоченный список содержит слайды, которые определены как элементы li . На иллюстрации выше показано, что элемент canvas с модифицированным изображением будет вставляться сюда.
В конце включаются jQuery и наш файл script.js , который будет разбираться позже в данном уроке.
CSSВсе стили для слайдшоу содержатся в файле styles.css . Мы используем id основного элемента #slideshow в качестве определения пространства имен, поэтому можно просто добавить данные стили к вашему проекту без риска конфликта имен.
styles.css#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 будет выводиться только первый слайд по умолчанию.
Базовый принцип действия слайдшоу мы уже разобрали. Теперь рассмотрим практическую реализацию.
script.js - Часть 1$(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
