Как сделать слайдер фоновых изображений
Обновлено: 07.07.2024
Существует много различных слайдеров. С кучей функционала, множеством настроек и т.п. Но есть у них один небольшой недостаток — в большинстве случаев невозможно расположить элементы поверх этих слайдеров. Либо это удается с помощью трюков и хаков.
Но если особые эффект не нужны, а необходио менять картинки, то есть один способ
Решается все просто сменой фоновых картинок. Делается это с помощью JavaScript — достаточно менять свойство backgroundImage у элемента.
А чтобы смена изображени была плавной и с простейшим эффектом fade, то всего-то и надо установить свойство transition больше нуля. Величину можно подобрать под свои задачи, но 1s (одна секунда) достаточно для большинства задач. Свойство элемента можно задать как в CSS, так и с помощью JavaScript.
Данный способ позволяет сделать простое фоновое слайд шоу для любого HTML элемента, который поддерживает использование картинки в виде фона.
Запись опубликована в рубрике Полезности с метками css, html, javascript. Добавьте в закладки постоянную ссылку.
Где отлично станет после установки дополнять основной дизайн, что на главной страницы или вновь созданной под определенную тематику. Но как можно наблюдать, что на аналогичном фоне под оттенок он себя отлично показывает в обзоре.
Здесь нет карусели, что нужно самостоятельно передвигать слайды, что делается по одному клику по кнопкам, что расположились под самим каркасом. Но и по количеству изначально понимаем, то количество изображений находится в слайдере, ведь они соответствуют по аналогичному размещению кнопок переключателя.
Так выглядит на светлом формате:
Этот вид с планшета, где все корректно выводит:
Здесь можно наблюдать, как будет смотреться на мобильном телефоне:
Установочный процесс:
.adaptivny-slayder <
position: relative;
max-width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
>
.adaptivny-slayder input[name="kadoves"] <
display: none;
>
.kadoves <
position: absolute;
left: 0;
bottom: -40px;
text-align: center;
width: 100%;
>
.adaptivny-slayder-lasekun <
overflow: hidden;
.abusteku-deagulus <
display: flex;
width: 100%;
transition: all 0.5s;
>
.abusteku-deagulus img <
width: 100%;
flex-shrink:0;
>
Простой стиль, плюс отличная адаптивность слайдера, который по своему формату идет на многие тематике, что изначально не определить тематический характер. Но больше всего его можно увидеть в шапке сайта ими в блоге. Ведь карусель не предусмотрена, все производится в ручную по кнопкам, так как они одни идут за переключатель кадров.
Что еще есть на сайте из этой темы:
Также обратите внимание на статью о том, как сделать фоновое изображение адаптивным в разным видам устройств:
Для начала просто посмотрите примеры и и убедитесь в том, что этот эффект вносит изюминку для страницы:
Вот как выглядят некоторые фоновые изображения из демо:
Как использовать данный эффект?
HTML часть
Мы будем рассматривать на примере Демо 1.
Подключаем между тегами следующие стили (normalize.css, mockup1.css) и скрипт Modernizr.js:
Для каждого демо есть свой файл стилей с соответствующей цифрой. Для первого демо — это mockup1.css, для 2-го — mockup2.css и так далее. Все они находятся в папке css.
Затем идет структура HTML страницы:
Коротко пройдемся по HTML:
- Строка: 2 — задается фоновое изображение страницы
- Строки: с 5 по 8 — изображения для слайд-шоу
- Строка: 12 — заголовок и подзаголовок
Вам лишь необходимо заменить изображения, которые используются в слайд-шоу на свои собственные.
jQuery часть
Остался маленький нюанс с адаптивностью. Чтобы она всё таки присутствовала перед закрывающим тегом
В данном уроке мы создадим простую адаптивную страницу с заголовком, украшенным каруселью, в которой изображения проскальзывают справа налево. Наше решение не использует JavaScript, слайдшоу основано на анимациях CSS3, которые поддерживаются в большинстве современных браузеров: Firefoх 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ и IE10.
Шаг 1 – Подготовительный
Нам потребуется 4 больших изображения (в нашем примере используется размер 1200px x 390px). Для горизонтального слайдера мы подготовим картинку размером 4800px x 390px в Photoshop, все наши изображения разместим одно за другим по горизонтали и сохраним результат в пригодном для веб пространства формате (“slider-horizontal.jpg”).
Шаг 2 – HTML
В действительности мы будем анимировать свойство background-position для нашего заголовка. Сам заголовок имеет очень простую разметку:
Полный код страницы выглядит следующим образом:
Шаг 3. CSS для мобильных устройств
Мы начнем определять стили для мобильных устройств. Зададим основу дизайна, а затем добавим расширения шаблона для больших экранов. В тексте урока приводятся только основные свойства, полный код можно посмотреть в исходниках:
Шаг 4. Стили для больших экранов
На больших экранах секции .main и .screen должны отображаться по другому. Секция .link будет иметь ширину 300px и позиционироваться как правая боковая панель, а секция .main останется слева. Также добавим двойную линию для разделения секций. Определять ширину экрана больше 1024px будем с помощью запроса @media:
Шаг 5. Адаптивные изображения в заголовке
Начнем работу над основной частью нашего урока: адаптивный слайдер на CSS в заголовке. Сначала обеспечим адаптивность фонового изображения.
С помощью двух значений, выраженных в процентах (400% для свойства background-size и 32.5% для нижнего отступа) фон заголовка будет выводиться корректно вне зависимости от размера экрана.
Почему 400% ? У нас есть 4 слайда, поэтому выводиться будет 1/4 от фонового изображения в заголовке. То есть, размер фона должен быть в 4 раза шире чем заголовок.
Почему 32.5%? Мы позиционируем наш фон внизу заголовка. Высота фонового изображения 390px, ширина отдельного слайда 1200px, 390/1200 = 0.325, то есть высота составляет 32.5% ширины.
Шаг 6. Анимация
Мы будем анимировать свойство background-position. Чтобы выводилось второе изображение свойство background-position должно иметь значение 33.33333% bottom, третье - 66.66667% bottom, а четвертое – 100% bottom. Первое изображение выводится при значении свойства background-position равном 0 bottom или 133.33333% bottom (мы устанавливаем для повторений значение repeat-x).
Каждое изображение имеет 25% от времени "славы". Первое выводится от 0 до 25%, второе - от 25% до 50%, третье - от 50% до 75%, а последнее - от 75% до 100%. Мы устанавливаем переходы так, чтобы изображение начинало выскальзывать немного раньше (используем значение 5%) прежде, чем истекут 25% его времени вывода. Вот так выглядит @keyframes:
Обратите внимание, что нужно добавить префиксы браузеров: @-webkit-keyframes (для Chrome, Safari, iOS Safari, Android) и @-moz-keyframes (для Firefox 15).
Ниже приводится полный код заголовка. Наша анимация “h_slide” повторяется каждые 24 с (6 с для каждого слайда) в бесконечном цикле. Функция времени имеет значение ease-out, так что каждый слайд замедляется в конце перехода.
Готово!
5 последних уроков рубрики "CSS"
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Читайте также: