Бешеный конкурс!
8:00
Автор: Рубрика: CSS-рецепты Комментариев нет

Альтернативный css3 слайдер на анимационных эффектах

css3 слайдер
Всем привет. Сегодня я покажу вам другой пример css3 слайдера. В этот раз мы сделаем его за счет анимации. Ранее я уже писал статью о создании слайдера на чистом css, но сегодня я покажу немного другой прием.

Если вы читали ту статью полностью, то я там говорил о том, что на css нельзя сделать слайдер, который менял бы картинки автоматически, без участия пользователя. Так вот, я был не прав! Просто я забыл, что в css3 существует анимация, с помощью которой мы и сделаем сегодня наш альтернативный слайдер. В целом, это получится даже проще, чем другим способом.

Создание слайдера с помощью keyframes

Начать нужно с html-разметки. В этом случае она будет совсем простой, всего один блок с идентификатором:

<div id = "slider"></div>

Для слайдов я подготовил 3 картинки одинаковых размеров. В моем случае получилось 448 пикселей в ширину и 251 в длину. Это размеры картинок. Я рекомендую вам, чтобы все размеры были одинаковы, тогда вообще никаких проблем с нашим слайдером не будет.

Соответственно, далее я указываю некоторые css-стили блоку:

#slider{
width: 448px;
height: 251px;
margin: 0 auto;
background: url(1.jpg);
}

Я задал ему размеры такие же, как у каждой картинки, сделал по центру родительского блока, а также уже задал в качестве фона первую картинку. Теперь все выглядит так:
1
У нас просто фоновая картинка в блоке, и больше ничего. Для простоты я сохранил картинки, которые использую в этом примере под названиями 1, 2 и 3.

А вот теперь начинается самое интересное. Самое время прописать ту самую анимацию, которая заставит фоновое изображение изменяться. Это делается с помощью конструкции @keyframes.

@keyframes slider{
0%{ background: url(1.jpg);}
33%{ background: url(2.jpg);}
66%{ background: url(3.jpg);}
}

Давайте подробнее рассмотрим этот кусок кода. К слову, его нужно поместить в css-файл. После ключевого слова @keyframes идет имя анимации, оно может быть абсолютно любым, но в нем могут быть только латинские символы. Далее открываются фигурные скобки и уже в них записывается каждый отдельный анимационный эффект.

Что же мы тут видим? Во-первых, сначала указывается временной отрезок в анимации, а потом в фигурных скобках пишутся свойства, которые должны применяться в этот момент. Мы как бы говорим браузеру, что в самом начале анимации фоном должно быть изображение 1.jpg, далее на трети выполнения анимации оно должно быть изменено на 2.jpg, ну и ближе к концу опять на другое изображение.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Отлично, мы уже все прописали. Можете сохранить файл и обновить страницу, но ничего не изменится. Все потому, что вы всего лишь описали анимационные эффекты, но не связали их с нужным блоком. А я напомню, нам нужно связать написанный @keyframes с блоком #slider. Помните, мы ему прописывали стили, самое время добавить еще парочку. В частности, связка с анимацией происходит с помощью двух обязательных свойств:

animation-name: slider;
animation-duration: 7s;

Это все сразу расставляет по своим местам! Во-первых, мы связываем анимацию slider с блоком. Во-вторых, указываем время ее выполнения. Теперь браузер понимает процентную запись и может в нужное время менять фон блока.

Попробуйте обновить страницу и вы увидите, что все работает! Возможно, у вас другие изображения (не обезьяны), но суть не в этом. Однако анимация выполнится всего лишь один раз, после чего смена картинок перестанет выполняться. А это явно не то, что нам нужно.

Решается эта проблема очень просто — нужно добавить свойство, которое установит количество повторений анимации, как бесконечное. Вот оно:

animation-iteration-count: infinite;

Как вы понимаете, вместо значения infinite может быть конкретное число повторов, которое вам нужно. Таким образом картинки будут меняться постоянно, а вы теперь можете сделать автоматический слайдер с картинками на чистом css. И хотя их нельзя переключать вручную, все равно этот прием может применяться в сайтостроении, поэтому очень полезно о нем знать. Что ж, это был альтернативный способ создать слайдер без скриптов. Если у вас остались какие-то вопросы, прошу задавать их в комментарии.

Как видите, в css смена картинок без вмешательства пользователя вполне возможна. Надеюсь, эта информация была для вас полезной.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет