Адаптивный слайдер без Javascript на CSS3. Интересный и одновременно простой слайдер на чистом CSS3 Скачать готовый слайдер для html
Слайдер без использования JavaScript с крутым эффектом перелистывания слайдов. Отлично адаптируется под любые устройства. Исходники в наличии.
Особенность: слайдер на CSSСлайдер на чистом CSS — это готовый слайдер с автоматическим переключением слайдов без помощи JS-скриптов. Как правило, такой вид слайдеров ценится начинающими разработчиками или в том случае, когда нет возможности\необходимость подключать библиотеки.
Разумеется, проще воспользоваться специальными плагинами для создания слайдеров (таких очень много, на том же jQuery). Но данный слайдер соблазняет своим необычным эффектом перелистывания слайдов. При чем, с высокой производительностью.
Как использовать этот пример у себя на сайтеПо ссылке выше, Вы можете скачать архив, в котором будет располагаться файл slider-css.html . Теоретически, все, что Вам необходимо для запуска слайдера на CSS на Вашем сайте, находится в этом файле. Вот Ваш алгоритм действий:
1. Копируем все стили блока слайдера, они находятся в теге
...
|
Обратите внимание, что контейнер.untitled имеет свойства position: absolute и возможно, Вам придется немного адаптировать его под себя.
2. Все слайды обернуты в
...
< div class = "untitled" > < div class = "untitled__slides" > . . . < / div > < / div > |
3. В самом HTML-коде слайда разобраться несложно
London Scout Unsplash Profile
< div class = "untitled__slide" > < div class = "untitled__slideBg" > < / div > < div class = "untitled__slideContent" > < span > London < / span > < span > Scout < / span > < a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" > Unsplash Profile < / a > |
- Разработка веб-сайтов ,
- CSS ,
- HTML
Я никому не открою Америку, не удивлю публику новым фокусом и не взорву мозг тем, кто в CSS3 плавает, как аквалангист. Расскажу простой способ, как создать слайдер с помощью простых функций CSS3 без необходимости использовния javascript.
1. Верстаем основу Для реализации слайдера нам понадобится довольно простой набор тэгов, которые будут в свою очередь отвечать за элементы слайдера.
Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png);
}
С оформлением фона и общими стилями всё понятно.
Wrapper {
height: 350px;
margin: 100px auto 0;
position: relative;
width: 700px;
}
.slider {
background-color: #ddd;
height: inherit;
overflow: hidden;
position: relative;
width: inherit;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.
Wrapper > input {
display: none;
}
Радио-кнопки скрываем. Они нам понадобятся позже.
Результат на данный момент такой:
3. Оформляем слайды Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:Slides {
height: inherit;
position: absolute;
width: inherit;
}
.slide1 { background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); }
.slide2 { background-image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); }
.slide3 { background-image: url(http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); }
.slide4 { background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); }
.slide5 { background-image: url(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); }
Для всех слайдов мы указали абсолютное позиционирование, чтобы можно было играть с эффектами появления. Размеры слайдов берутся из размера самого слайдера, чтобы не приходилось их прописывать в нескольки местах.
Wrapper .controls {
left: 50%;
margin-left: -98px;
position: absolute;
}
.wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.wrapper label:after {
border: 2px solid #ddd;
content: " ";
display: block;
height: 12px;
left: -4px;
position: absolute;
top: -4px;
width: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:
Wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background ease-in-out .5s;
-moz-transition: background ease-in-out .5s;
-o-transition: background ease-in-out .5s;
transition: background ease-in-out .5s;
}
.wrapper label:hover,
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5) {
background: #ddd;
}
В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:
Slides {
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
z-index: 0;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5 {
opacity: 1;
z-index: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.
Результат можно посмотреть здесь.
Слайдер на CSS имеет ряд преимуществ над слайдерами на jQuery. Мы отказываемся от громоздких плагинов, благодаря чему повышается скорость загрузки сайта, а использование CSS анимации делает смену слайдов более плавной. Именно поэтому я хочу вас научить как сделать слайдер на CSS3.
Для работы с этим уроком вам нужно иметь общее представление о CSS3 переходах и анимации по ключевым кадрам. Используя эту простую концепцию, мы увидим как сделать слайдер изображений. Пожалуйста, обратите внимание, что эти свойства будут работать только в современных браузерах (в частности IE10+).
Слайдер на CSS3
Базовые концепции CSS переходовОбычно, когда вы измените значение CSS, изменение происходит мгновенно. Теперь, благодаря универсальному CSS3 свойству transition , мы можем легко анимировать от старого к новому состоянию.
Мы можем использовать четыре свойства перехода:
Поскольку технология все еще относительно новая, потребуется использовать префиксы для браузеров. Мы будем опускать их в примерах кода в этой статье, но не забудьте включить их в своем коде чтобы ваш слайдер на CSS работал должным образом. Давайте посмотрим, как применить простой переход к ссылке:
A { color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: ease-in; transition-delay: 0.3s; } a:hover { color: #fff; }
При назначении анимации к элементу вы также можете использовать сокращенную запись:
A { color: #000; transition: color 0.7s ease-in 0.3s; } a:hover { color: #fff; }
Давайте посмотрим как применять простую анимацию в div .
/* К этим элементам также применяем анимацию */ div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; } /* Это код анимации */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } }
Но мы можем использовать сокращенную запись записав все свойства анимации сразу:
Div { animation: move 1s ease-in-out 0.5s 2 alternate; }
Ключевые кадры для CSS слайдераКлючевые кадры определяют то, как анимация выглядит на каждом этапе временной шкалы. Ключевые кадры используют процентное значение для определения времени: 0% это начало анимации, а 100% конец. Вы можете также добавить ключевые кадры для промежуточной анимации.
/* Анимация от 0% до 100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* Анимация с промежуточными ключевыми кадрами */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }
Структура CSS-слайдераТеперь, когда мы знаем как работают переходы и анимации, давайте посмотрим как создать наш слайдер, используя только CSS3. Этот рисунок показывает как анимация должна работать:
Как функционирует анимация слайдераКак видите, наш слайдер - это контейнер, внутри которого отображаются изображения. Анимация здесь очень простая: изображение следует по предварительно определенному пути путем анимации свойства top и меняя свойства z-index и opacity когда изображение возвращается в исходное состояние. Давайте погрузимся в HTML-разметку для создания слайдера.
- Пума ...
- Солнечные ванны
HTML-разметка очень проста и SEO дружелюбна. Рассмотрим в деталях, как все работает:
- div id="slider"
Это главный контейнер слайдера. Он не имеет определенной функции, но мы должны приостановить его анимацию.
- div id="mask"
Мы будем использовать маску для CSS слайдера, чтобы скрыть все, что происходит за его пределами.
- li id="first" class="firstanimation"
Каждый элемент списка имеет идентификатор и класс. Идентификатор отвечает за подсказку, а класс привязан к анимации, которая должена произойти.
- div class="tooltip"
Блок для отображения названия изображения. Вы можете изменить его под свои нужды, например, сделав его интерактивными, и добавив краткое описание.
- div class="progress-bar"
Он содержит функцию, которая показывает ход анимации.
Теперь пришло время для CSS стилей.
CSS стили слайдераДавайте создадим базовую структуру слайдера. Он будет иметь тот же размер, что и изображение. CSS cвойство border будет полезно для создания рамки вокруг изображения.
/* Структура слайдера */ .slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }
Блок mask скроет все элементы, которые лежат за пределами слайдера; его высота должна быть равна высоте слайдера.
/* Спрячем все */ .mask { overflow: hidden; height: 320px; }
Наконец, чтобы отсортировать список изображений, мы зададим position: absolute и top: -325px , так что все изображения будут расположены за пределами слайдера.
/* Список изображений */ .slider ul { margin: 0; padding: 0; position: relative; } .slider li { width: 680px; /* Ширина изображения */ height: 320px; /* Длина изображения */ position: absolute; top: -325px; /* Исходное положение - вне слайдера */ list-style: none; }
С помощью этих нескольких строк кода мы создали наш слайдер без javascript, осталось только добавить анимацию.
Ключевые кадры CSS анимации Анимация изображения для слайдераПрежде чем мы начнем работать с анимацией, мы должны указать некоторые параметры для того, чтобы получить правильный вид анимации. Oбщая продолжительность нашей анимации - 25 секунд, но мы должны знать, сколько ключевых кадров равны 1 секунде. Итак, давайте рассмотрим серию операций, которые дадут нам точное число ключевых кадров на основе анимируемых изображений. Вот расчеты:
Теперь мы можем применить CSS анимацию к слайдеру. Мы сможем поставить анимацию на бесконечный цикл, потому что у каждого изображения своя собственная анимация.
Firstanimation { animation: cycle 25s linear infinite; } .secondanimation { animation: cycletwo 25s linear infinite; } .thirdanimation { animation: cyclethree 25s linear infinite; } .fourthanimation { animation: cyclefour 25s linear infinite; } .fifthanimation { animation: cyclefive 25s linear infinite; }
После того, как свойства анимации назначены, мы должны использовать ключевые кадры для настройки анимации движения. Также я добавил свойства opacity и z-index , чтобы сделать переход от одного изображения к другому более плавным. Первая анимация имеет больше ключевых кадров, чем последняя. Причина этого в том, что когда последнее изображение завершило свою анимацию, первое изображение должно иметь дополнительные ключевые кадры для того, чтобы пользователь не видел перерыва между циклами анимации.
/* Анимация на примере первых двух изображений */ @keyframes cycle { 0% { top: 0px; } /* При запуске слайда первое изображение уже видно */ 4% { top: 0px; } /* Исходное положение */ 16% { top: 0px; opacity:1; z-index:0; } /* От 4% до 16% = изображение видно 3 секунды */ 20% { top: 325px; opacity: 0; z-index: 0; } /* От 16% до 20% = 1 секунда на уход изображения */ 21% { top: -325px; opacity: 0; z-index: -1; } /* Вернуться в исходную позицию */ 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } /* От 96% до 100% = 1 секунда на появление изображения */ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -325px; opacity: 0; } /* Исходное положение */ 16% { top: -325px; opacity: 0; }/* Начинает двигаться на эту позицию после 16% */ 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } /* От 20% до 24% = 1 секунда на появление изображения */ 36% { top: 0px; opacity: 1; z-index: 0; } / * От 24% до 36% = изображение видно 3 секунды * / 40% { top: 325px; opacity: 0; z-index: 0; } /* От 36% до 40% = 1 секунда на уход изображения */ 41% { top: -325px; opacity: 0; z-index: -1; } /* Вернуться в исходную позицию */ 100%{ top: -325px; opacity: 0; z-index: -1; } }
Создав анимацию, мы должны добавить прогресс бар для отображения продолжительности каждой анимации.
Индикатор прогресса (прогресс-бар)Процесс создания анимации индикатора такой же, как и у слайдера. Во-первых, мы создаем сам индикатор:
/* Индикатор прогресса слайдера */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }
Не бойтесь синтаксиса, описанного ниже: он также задает состояние "from" и "to".
/* CSS3 анимация индикатора прогресса слайдера */ @keyframes fullexpand { /* В этих ключевых кадрах индикатор находится в неподвижном состоянии */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /* В этих ключевых кадрах прогресс-бар начинает оживать */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /* В этих ключевых кадрах индикатор движется вперед в течение 3 секунд */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /* В этих ключевых кадрах прогресс-бар закончил свой путь */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /* В этих ключевых кадрах прогресс-бар исчезнет, а затем цикл возобновится */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }
CSS3 анимация подсказки слайдераСлайдер уже почти готов, но давайте добавим несколько деталей, чтобы сделать его более функциональным. Мы добавим подсказки для названий изображений, которые будут видны при наведении.
Вот CSS для всплывающих подсказок:
Tooltip { background: rgba(0,0,0,0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; } .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 10px; }
Здесь мы сделали так, что показываются только заголовки изображений, но вы можете сделать то же самое с пользовательским контентом, ссылками и пр.
Анимация подсказки при наведенииМы видели, как применить CSS3 переходы элементов; Теперь давайте сделаем это в подсказках.
Tooltip { … transition: all 0.3s ease-in-out; } .slider li:hover .tooltip { left: 0px; }
Пауза и продолжение анимации слайдера Остановка анимации при наведении курсора мышиДавайте разрешим пользователям сделать паузу, чтобы прочитать подсказку или рассмотреть изображения. Для этого мы должны остановить анимацию при наведении курсора мыши на изображение (мы также должны остановить анимацию индикатора прогресса).
Slider: hover li, .slider:hover .progress-bar { animation-play-state: paused; }
Заключение и бонусный CSS3 слайдер)Наконец, мы достигли конца урока. CSS3 слайдер теперь готов на 100%! Взгляните на демонстрационный пример CSS слайдера без Javascript . Он работает в Firefox 5+, Safari 4+, IE10+ и Google Chrome, а также iPhone и IPad..
Эффект впечатляет, но по общему признанию, это слайдер не очень гибкий. Например, чтобы добавить больше изображений, вам придется редактировать все ключевые кадры. CSS3 имеет большой потенциал, но иногда лучше воспользоваться JavaScript, чем заморачиваться с ключевыми кадрами. А теперь, бонусный слайдер на CSS3 , как я и обещал.
Я никому не открою Америку, не удивлю публику новым фокусом и не взорву мозг тем, кто в CSS3 плавает, как аквалангист. Расскажу простой способ, как создать слайдер с помощью простых функций CSS3 без необходимости использовния javascript.
1. Верстаем основу Для реализации слайдера нам понадобится довольно простой набор тэгов, которые будут в свою очередь отвечать за элементы слайдера.
Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png);
}
С оформлением фона и общими стилями всё понятно.
Wrapper {
height: 350px;
margin: 100px auto 0;
position: relative;
width: 700px;
}
.slider {
background-color: #ddd;
height: inherit;
overflow: hidden;
position: relative;
width: inherit;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.
Wrapper > input {
display: none;
}
Радио-кнопки скрываем. Они нам понадобятся позже.
Результат на данный момент такой:
3. Оформляем слайды Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:Slides {
height: inherit;
position: absolute;
width: inherit;
}
.slide1 { background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); }
.slide2 { background-image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); }
.slide3 { background-image: url(http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); }
.slide4 { background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); }
.slide5 { background-image: url(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); }
Для всех слайдов мы указали абсолютное позиционирование, чтобы можно было играть с эффектами появления. Размеры слайдов берутся из размера самого слайдера, чтобы не приходилось их прописывать в нескольки местах.
Wrapper .controls {
left: 50%;
margin-left: -98px;
position: absolute;
}
.wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.wrapper label:after {
border: 2px solid #ddd;
content: " ";
display: block;
height: 12px;
left: -4px;
position: absolute;
top: -4px;
width: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:
Wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background ease-in-out .5s;
-moz-transition: background ease-in-out .5s;
-o-transition: background ease-in-out .5s;
transition: background ease-in-out .5s;
}
.wrapper label:hover,
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5) {
background: #ddd;
}
В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:
Slides {
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
z-index: 0;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5 {
opacity: 1;
z-index: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.
Результат можно посмотреть здесь.
Здравствуйте уважаемые начинающие веб-мастера.
Вот самый простой в мире слайдер на чистом CSS.
К преимуществам такого слайдера можно отнести лёгкость и безопасность, а так же то, что его сможет сделать и установить на свой сайт даже самый начинающий веб-мастер.
А недостаток в том, что только на CSS невозможно сделать повтор цикла.
Но если учесть, что восемь картинок прокручиваются более 30 секунд, то этого времени вполне достаточно посетителю для просмотра страницы.
И если слайдер установлен в шапке сайта, то её уж точно никто полминуты рассматривать не будет.
Эффекты появления картинок можно изменить по своему вкусу, и в соответствии с возможностями CSS3. Давайте смотреть где и как это можно сделать.
Слайдер CSS
/* Блок слайдера */
#slaid
{
/* Задаём относительное позиционирование */
position
: relative
;
/*Размер и рамка блока*/
width
: 400px
;
height
: 200px
;
border
: 2px solid #333
;
border-radius
: 5px
;
}
/* Групповой селектор для 7-ми картинок */
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7
{
/* Позиционируем абсолютно относительно блока */
position
: absolute
;
/* Делаем их полностью прозрачными */
opacity
: 0
;
width
: 400px
;
height
: 200px
;
}
/* Подключаем анимацию к первой картинке */
.image1
{
animation
: one-image 8s 1s ease alternate
;
}
/* Анимация последующих картинок выполняется с задержкой начала необходимой для прокрутки предыдущих изображений */
.image2
{
animation
: two-image 8s 5s ease alternate
;
}
.image3
{
animation
: three-image 8s 10s ease alternate
;
}
.image4
{
animation
: four-image 8s 14s ease alternate
;
}
.image5
{
animation
: five-image 8s 18s ease alternate
;
}
.image6
{
animation
: six-image 8s 22s ease alternate
;
}
.image7
{
animation
: seven-image 8s 26s ease alternate
;
}
/* Последняя картинка не прозрачная остаётся видной после прокрутки */
.image8
{
position
: absolute;
width
: 400px
;
height
: 200px
;
animation
: eight-image 34s ease alternate
;
}
/* Анимации для первой картинки */
@keyframes one-image
{
/* Задаём изменение прозрачности. Здесь можно добавить вращение, перемещение из-за границ блока или появление из центра (масштабирование) */
0%
{
opacity
: 1
;
}
50%
{
opacity
: 1
;
}
100%
{
opacity
: 0
;
}
}
/* Анимация для следующих 6-и картинок */
@keyframes two-image
{
0%
{
opacity
: 0
;
}
50%
{
opacity
: 1
;
}
100%
{
opacity
: 0
;
}
}
@keyframes three-image
{
0%
{
opacity
: 0
;
}
50%
{
opacity
: 1
;
}
100%
{
opacity
: 0
;
}
}
@keyframes four-image
{
0%
{
opacity
: 0
;
}
50%
{
opacity
: 1
;
}
100%
{
opacity
: 0
;
}
}
@keyframes five-image
{
0%
{
opacity
: 0
;
}
50%
{
opacity
: 1
;
}
100%
{
opacity
: 0
;
}
}
@keyframes six-image
{
0%
{
opacity
: 0
;
}
50%
{
opacity
: 1
;
}
100%
{
opacity
: 0
;
}
}
@keyframes seven-image
{
0%
{
opacity
: 0
;
}
50%
{
opacity
: 1
;
}
100%
{
opacity
: 0
;
}
}
/* Анимация для восьмой картинки */
@keyframes eight-image
{
/* остаётся прозрачной пока не прокрутятся предыдущие */
0%
{
opacity
: 0
;
}
87%
{
opacity
: 0
;
}
/*Становиться видимой в конце работы слайдера */
100%
{
opacity
: 1
;
}
}
И на всякий случай — чтобы появилась возможность прокрутить слайдер ещё раз можно добавить следующий код:
var CLN; onload = function () {CLN = document.getElementById ("slaid").cloneNode (3)}
При этом под слайдером появится кнопка которую можно назвать как Вам угодно и оформить в CSS.
P.S. Если постараться и подогнать интервалы показа картинок в @keyframes, то карусель можно сделать непрерывной.
У меня получилось. Можно посмотреть вот . Текст в баннерах прокручивается свойствами анимации без скрипта.
Правда получилось сделать только с тремя картинками.
P.P.S. Теперь подобные баннеры и на этом сайте под шапкой сайта.
Желаю творческих успехов.