Автоматическая смена картинок при помощи CSS до недавнего времени была невозможной. Если была такая потребность, то делалось это исключительно силами JavaScript. JavaScript — это язык программирования, который специально создавался для того, чтобы анимировать веб-страницы. До его прихода в веб-разработку, веб-страницы были статичными и не обладали современной динамикой.
Проблема JavaScript в том, что этот язык немного сложнее чем CSS, плюс его скрипты больше нагружают браузер пользователя. CSS «легче», поэтому если есть возможность для простой анимации воспользоваться силами CSS, то лучше это сделать.
Автоматическая смена картинок — это вид простой анимации, где необязательно применять возможности JavaScript. Поэтому сегодня мы покажем как можно наладить смену изображений, используя возможности CSS.
Смена картинок с помощью CSS
Смена картинок с помощью CSS может быть реализована несколькими методами. Сегодня мы покажем 2 вариации автоматизации. Любую из них вы сможете использовать у себя на сайте, доработав под собственные нужды.
Первое с чего нужно начать — это разметка HTML. У нас она такая:
<div class="imgContainer">
<img class="firstImg" src="first.jpg" />
<img class="secondImg" src="second.jpg" />
</div>
Прежде чем заняться анимированием картинок, нужно им задать определенные стили. В нашем случае они такие:
.imgContainer {
position:relative;
height:300px;
width:500px;
margin:10 auto;
}
.imgContainer img {
position:absolute;
left:0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
После того как основные стили были заданы, можно реализовать смену картинок с помощью CSS. Стили будут такими:
@-webkit-keyframes myImgAnimation {
0% {
opacity:1;
}
40% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes myImgAnimation {
0% {
opacity:1;
}
40% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes myImgAnimation {
0% {
opacity:1;
}
40% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:0;
}
}
@keyframes myImgAnimation {
0% {
opacity:1;
}
40% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:0;
}
}
#imgСontainer img.firstImg {
-webkit-animation-name: myImgAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-animation-direction: alternate;
-moz-animation-name: myImgAnimation;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 6s;
-moz-animation-direction: alternate;
-o-animation-name: myImgAnimation;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 6s;
-o-animation-direction: alternate;
animation-name: myImgAnimation;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 6s;
animation-direction: alternate;
}
На этом первый вариант смены картинок с помощью CSS закончен. По факту мы имеем две картинки, которые будут непрерывно заменять друг друга через каждые 6 секунд. По сути это и есть реализация анимации по таймеру. Кода CSS на первый взгляд покажется много, но это потому что пока мы вынуждены писать практически один и тот же код, но для разных браузеров. Если оставить только общий CSS-код, то в разных браузерах стили могут отображаться с искажением. Надеемся, что в скором времени это исправят и можно будет писать единственные стили под разные браузеры.
Давайте рассмотрим еще одну реализацию схемы картинок с помощью CSS. На этот раз возьмем три картинки. У нас получится вот такая HTML-разметка:
<div class="imgContainer">
<img src="first.jpg" />
<img src="second.jpg" />
<img src="third.jpg" />
</div>
Обратите внимание, что в этом случае HTML-разметка немного отличается от первого варианта и выглядит немного проще.Стили CSS будут такими:
@keyframes myImgAnimation {
0% { opacity: 0; }
12.12% { opacity: 1; }
35.35% { opacity: 1; }
45.45% { opacity: 0; }
100% { opacity: 0; }
}
. imgContainer { position:relative; width:70%;}
. imgContainer img { position:absolute; width:100%; left:0; right:0; opacity:0; animation-name: myImgAnimation; animation-duration: 10s; animation-iteration-count: infinite; }
. imgContainer img:nth-child(1) { animation-delay: 0s; }
. imgContainer img:nth-child(2) { animation-delay: 4s; }
. imgContainer img:nth-child(3) { animation-delay: 7s; }
На этом все. Данный код можно самостоятельно немного «подкрутить». Например, можно изменить скорость смены изображений, добавить или убрать изображения и т. д.
Заключение
Сегодня мы рассмотрели, как реализуется автоматическая смена картинок силами чистого CSS. Вся прелесть CSS в том, что вариантов реализовать автоматическую смену изображений очень много. Если лучше изучить возможности таблицы стилей, тогда в некоторых случаях простой анимации можно не использовать возможности JavaScript, а ограничиваться знаниями CSS.
Понятно, что чистый CSS-код еще не скоро заменит функциональные возможности JavaScript, но предпосылки к этому есть.
Web
