Полноэкранное слайдшоу на 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-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
"Не пытайтесь перехитрить поисковые машины - надежность и доверие ценятся в сфере поискового маркетинга куда больше." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.