Полноэкранное слайдшоу на CSS3
В данном уроке мы сделаем полноэкранное слайдшоу фоновых изображений с использованием только CSS3. В демонстрации представлены несколько различных эффектов с использованием трансформаций и анимаций CSS.
Разметка HTML
Для слайдшоу используется неупорядоченный список. Для каждого изображения добавляется элемент span
и для заголовка используется элемент div
:
<ul class="cb-slideshow"> <li> <span>Изображаение 01</span> <div> <h3>РЕ·ЛАК·СА·ЦИЯ</h3> </div> </li> <li> . . . </li> <li> . . . </li> </ul>
Элемент 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; }
В демонстрации для маски используется повторяющийся точечный шаблон.
Элемент span
, который содержит изображение слайдшоу будет позиционироваться абсолютно и будет иметь ширину и высоту 100%. Так как внутри есть некотрый текст, то для его скрытия используем прозрачный цвет. Свойство для размера фона со значением “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; }
Анимация для заголовка также будет длиться 37 секунд.
Теперь определим фоновые изображения для всех элементов 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 секунд. За данный период непрозрачность изменяется от 0 до 1, когда проходит 8% времени анимации. Затем непрозрачность сохраняется в течении 17%. При достижении 25% непрозрачность опять должна стать 0 и оставаться таковой до конца.
Откуда взялись все эти значения? Нам нужно, чтобы каждое изображение было видимым в течении 6 секунд, а в конце цикла должно снова появляться первое изображение. У нас есть 6 изображений и нужно 36 секунд на весь цикл. Теперь нужно определить “время” для нужных значений непрозрачности. Так как второе изображение будет запускать анимацию через 6 секунд, нужно вычислить процент длительности для гашения первой картинки. Делим 6 на 36 и получаем 0.166… что соответствует 17% шага анимации. Теперь определим промежуточные шаги, чтобы улучшить процесс проявления изображения. На 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 } }
Для браузеров, которые не поддерживают анимации, мы просто показываем последнее изображение, устанавливая для него непрозрачность 1:
.no-cssanimations .cb-slideshow li span{ opacity: 1; }
Класс no-cssanimations добавляется плагином Modernizr.
Последнее, что нужно сделать - установить размер шрифта, когда экран браузера маленький. Для решения задачи будем использовать медиа запросы:
@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; transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 } }
Заголовок будет выскальзывать справа и затем уплывать налево, одновременно затухая.
@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 } }
Другие примеры можно посмотреть в демонстрации.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/yBLu8BF7Pqw/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.