Главная » 2013 » Август » 20 » Слайдер на CSS3 (Полезное)
20.08.2013, 19:57

Слайдер на CSS3



Сегодня я хотел бы показать вам, как создать красивый и легкий слайдер на CSS3. Он использует эффект плавного переключения между слайдами. Кроме того, вы можете использовать пользовательский рекламный текст для каждого слайда. Мы будем использовать основные UL-LI ненумерованного списка, чтобы сделать этот слайдер. Для просмотра не нужно, где либо кликать при переключении слайдов - все работает автоматически (CSS3 анимация).

Шаг 1. HTML

Разметка HTML очень простая. Состоит из четырех пунктов списка. Каждый слайд состоит из изображения (как фон) и рекламный текст в DIV. При необходимости, легко можно слайды добавить.

Код
<div class="slides">
  <ul> <!-- slides -->
  <li><img src="images/pic1.jpg" alt="image01" />
  <div>Promo text #1</div>
  </li>
  <li><img src="images/pic2.jpg" alt="image02" />
  <div>Promo text #2</div>
  </li>
  <li><img src="images/pic3.jpg" alt="image03" />
  <div>Promo text #3</div>
  </li>
  <li><img src="images/pic4.jpg" alt="image04" />
  <div>Promo text #4</div>
  </li>
  </ul>
</div>


Шаг 2. CSS

Теперь определим стили CSS для нашего слайдера. Вот стили для основного элемента слайдера, пункта списка и рекламного текста:

Код
/* fade slider */
.slides {
  height:300px;
  margin:50px auto;
  overflow:hidden;
  position:relative;
  width:900px;
}
.slides ul {
  list-style:none;
  position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
  0% {
  opacity:0;
  }
  6% {
  opacity:1;
  }
  24% {
  opacity:1;
  }
  30% {
  opacity:0;
  }
  100% {
  opacity:0;
  }
}
@-moz-keyframes anim_slides {
  0% {
  opacity:0;
  }
  6% {
  opacity:1;
  }
  24% {
  opacity:1;
  }
  30% {
  opacity:0;
  }
  100% {
  opacity:0;
  }
}

.slides ul li {
  opacity:0;
  position:absolute;
  top:0;

  /* css3 animation */
  -webkit-animation-name: anim_slides;
  -webkit-animation-duration: 24.0s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: anim_slides;
  -moz-animation-duration: 24.0s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
  -webkit-animation-delay: 6.0s;
  -moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
  -webkit-animation-delay: 12.0s;
  -moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
  -webkit-animation-delay: 18.0s;
  -moz-animation-delay: 18.0s;
}
.slides ul li img {
  display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
  0% {
  left:100%;
  opacity:0;
  }
  5% {
  left:10%;
  opacity:1;
  }
  20% {
  left:10%;
  opacity:1;
  }
  25% {
  left:100%;
  opacity:0;
  }
  100% {
  left:100%;
  opacity:0;
  }
}
@-moz-keyframes anim_titles {
  0% {
  left:100%;
  opacity:0;
  }
  5% {
  left:10%;
  opacity:1;
  }
  20% {
  left:10%;
  opacity:1;
  }
  25% {
  left:100%;
  opacity:0;
  }
  100% {
  left:100%;
  opacity:0;
  }
}

.slides ul li div {
  background-color:#000000;
  border-radius:10px 10px 10px 10px;
  box-shadow:0 0 5px #FFFFFF inset;
  color:#FFFFFF;
  font-size:26px;
  left:10%;
  margin:0 auto;
  padding:20px;
  position:absolute;
  top:50%;
  width:200px;

  /* css3 animation */
  -webkit-animation-name: anim_titles;
  -webkit-animation-duration: 24.0s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: anim_titles;
  -moz-animation-duration: 24.0s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;
}


ДЕМО
Материал взят с сайта infoscript.ru
Теги: Скачать Слайдер на CSS3
Скачать "Слайдер на CSS3"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: Полезное | Просмотров: 1847 | Добавил: Skaiman | Рейтинг: 0.0/0 |
Всего комментариев: 1
0  
1 VeD   (26.09.2013 18:39) [Материал]
Аватар пользователя
Супер. Беру себе.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]