QR CODE для записи

Простой слайдер на CSS3

В данной статье я хочу показать реализацию CSS3 слайдера. Данная реализация конечно очень примитивна. Тут нет ни кнопок «вперед/назад», ни остановки слайдера. При добавление нового слайда, придется заново просчитывать анимацию и переписывать стили. И конечно же CSS3 слайдер не поддерживается старыми браузерами и Оперой.

Минусов как видно достаточно много. Но данные слайдеры помогут понять анимацию CSS3 и из них можно сделать простые слайдеры, ротаторы, бегущие строки. И не за горами тот день, когда такое будет использоваться везде и всюду.

Сразу начну с примера — слайдер 1 и слайдер 2.

Cлайдер 1

Первый слайдер делается очень просто. Обо всём по порядку.

Для начала создадим HTML код для слайдов.

<div id="slider">
	<div>
		<img src="01.png" alt="">
		<h1>Умная девушка!</h1>
		<p>Quidditas tuo quid facilisis ex sic ut casus turbata minim venisse in fuerat accidens quam dicentes Is hendrerit ad nomine. Sibi ambulare manu impetum ideo omnibus caecus eum in lucem exempli paupers. Stranguillio ut libertatem deum rogus aegritudinis causet subsannio. per dicis eo dicimus quis nudus iuvenem. Stranguillionis vero rex in modo invenit Boreas quam aniculae morsque nutricem. Iterum non solutionem innocentem vis apud senex lacrimis non coepit. Iriure dolore suas sua confusus eos est cum unde meae sit audivit emere sibi dicit pietate.</p>
	</div><div>
		<img src="02.png" alt="">
		<h1>Деловая девушка!</h1>
		<p>Innocentis sit aliquip ipsa quod una civitatis in fuerat accidens suos alloquitur vidit pater. Thebaeorum in deinde plectrum anni ipsa codicellos numquam, scelerata nunc intuens clita materiae in modo cavendum es. Virginis instaret dolores ambulavit sapiens suam, thebaeorum in deinde plectrum anni ipsa codicellos. Dicere Tharsia adulescens tuorum ipsa hospes ibi effudit Lorem post discipulae venit est in. Iubeo non coepit cognitionis huius dulcis a. Apollinem existimas filiam in lucem in rei completo litus ostendam Apollonio omnino doming.</p>
	</div>
</div>

И оформим их стилями.

#slider {
	height: 300px;
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
}
#slider div {
	position: relative;
	height: 300px;
}
#slider img {display: block;}
#slider h1 {
	color: white;
	font-size: 300%;
	left: 60px;
	position: relative;
	text-shadow: 0 0 3px #000000, 0 0 3px #000000; /* Only CSS3, no prefix */
	top: -260px;
}
#slider p {
	background-color: rgba(0, 0, 0, 0.8);
	color: #EEEEEE;
	line-height: 140%;
	padding: 10px 20px;
	position: relative;
	top: -250px;
}

Тут стоит обратить внимание на overflow: hidden; у #slider. Он скроет все слайды, кроме первого. И position: relative; у #slider div — это необходимо, чтобы мы могли двигать слайды.

Теперь приступаем к самой анимации. Сначала я сделал вот такой вариант

#slider div {
	animation: mymove 10s linear infinite;
	-moz-animation: mymove 10s linear infinite; /* Firefox */
	-webkit-animation: mymove 10s linear infinite; /* Safari and Chrome */
}

@keyframes mymove {
	0% {top: 0px;}
	20% {top: 0px;}
	25% {top: -300px;}
	75% {top: -300px;}
	80% {top: 0px;}
	100% {top: 0px;}
}
/* Firefox */
@-moz-keyframes mymove {
	0% {top: 0px;}
	20% {top: 0px;}
	25% {top: -300px;}
	75% {top: -300px;}
	80% {top: 0px;}
	100% {top: 0px;}
}
/*Safari and Chrome*/
@-webkit-keyframes mymove {
	0% {top: 0px;}
	20% {top: 0px;}
	25% {top: -300px;}
	75% {top: -300px;}
	80% {top: 0px;}
	100% {top: 0px;}
}

Затем немного переделал… Но…опять всё по порядку.

Что мы тут имеем? Мы назначили нашему слайдеру анимацию. Подробности параметров написаны тут

animation: mymove 10s linear infinite;

И создали анимацию самих слайдов, не забыв про одинаковые имена, в этом примере mymove.

@keyframes mymove {
	0% {top: 0px;}
	20% {top: 0px;}
	25% {top: -300px;}
	75% {top: -300px;}
	80% {top: 0px;}
	100% {top: 0px;}
}

100% берем за общее время анимации. Эти 100% будут равны 30 секундам, указанным в свойстве animation. Разбиваем это время пополам и в первой половине выполняем анимацию (сдвиг) в одну сторону, а во второй, в обратной последовательности — обратно. В нашем примере сначала задаем «стоянку» кадра первые 20% времени, затем делаем движение. Затем опять стоим и двигаемся обратно.

Но потом да меня дошло, что я ступил. Ведь можно сделать проще. У нас есть замечательный параметр для анимации animation-direction: alternate, который позволяет по завершению цикла анимации проигрывать анимацию в обратном порядке.

#slider div {
	animation: mymove 5s linear infinite alternate;
	-moz-animation: mymove 5s linear infinite alternate; /* Firefox */
	-webkit-animation: mymove 5s linear infinite alternate; /* Safari and Chrome */
}

@keyframes mymove {
	0% {top: 0px;}
	45% {top: 0px;}
	55% {top: -300px;}
	100% {top: -300px;}
}
/* Firefox */
@-moz-keyframes mymove {
	0% {top: 0px;}
	45% {top: 0px;}
	55% {top: -300px;}
	100% {top: -300px;}
}
/*Safari and Chrome*/
@-webkit-keyframes mymove {
	0% {top: 0px;}
	45% {top: 0px;}
	55% {top: -300px;}
	100% {top: -300px;}
}

Как видно, тут примерно тоже самое: стоянка, движение, стоянка.
Еще раз ссылки на beta версию (назовем ее beta1) и финальную

Cлайдер 2

Второй вариант основывается на том же принципе, но с небольшим трюком, который имитирует прокрутку слайдов по кругу.

Для наглядности сделаем больше слайдов

<div id="slider">
	<div>
		<img src="01.png" alt="">
		<h1>Умная девушка!</h1>
		<p>Quidditas tuo quid facilisis ex sic ut casus turbata minim venisse in fuerat accidens quam dicentes Is hendrerit ad nomine. Sibi ambulare manu impetum ideo omnibus caecus eum in lucem exempli paupers. Stranguillio ut libertatem deum rogus aegritudinis causet subsannio. per dicis eo dicimus quis nudus iuvenem. Stranguillionis vero rex in modo invenit Boreas quam aniculae morsque nutricem. Iterum non solutionem innocentem vis apud senex lacrimis non coepit. Iriure dolore suas sua confusus eos est cum unde meae sit audivit emere sibi dicit pietate.</p>
	</div><div>
		<img src="02.png" alt="">
		<h1>Деловая девушка!</h1>
		<p>Innocentis sit aliquip ipsa quod una civitatis in fuerat accidens suos alloquitur vidit pater. Thebaeorum in deinde plectrum anni ipsa codicellos numquam, scelerata nunc intuens clita materiae in modo cavendum es. Virginis instaret dolores ambulavit sapiens suam, thebaeorum in deinde plectrum anni ipsa codicellos. Dicere Tharsia adulescens tuorum ipsa hospes ibi effudit Lorem post discipulae venit est in. Iubeo non coepit cognitionis huius dulcis a. Apollinem existimas filiam in lucem in rei completo litus ostendam Apollonio omnino doming.</p>
	</div><div>
		<img src="04.jpg" alt="">
		<h1>Умная девушка!</h1>
		<p>Quidditas tuo quid facilisis ex sic ut casus turbata minim venisse in fuerat accidens quam dicentes Is hendrerit ad nomine. Sibi ambulare manu impetum ideo omnibus caecus eum in lucem exempli paupers. Stranguillio ut libertatem deum rogus aegritudinis causet subsannio. per dicis eo dicimus quis nudus iuvenem. Stranguillionis vero rex in modo invenit Boreas quam aniculae morsque nutricem. Iterum non solutionem innocentem vis apud senex lacrimis non coepit. Iriure dolore suas sua confusus eos est cum unde meae sit audivit emere sibi dicit pietate.</p>
	</div><div>
		<img src="03.jpg" alt="">
		<h1>Деловая девушка!</h1>
		<p>Innocentis sit aliquip ipsa quod una civitatis in fuerat accidens suos alloquitur vidit pater. Thebaeorum in deinde plectrum anni ipsa codicellos numquam, scelerata nunc intuens clita materiae in modo cavendum es. Virginis instaret dolores ambulavit sapiens suam, thebaeorum in deinde plectrum anni ipsa codicellos. Dicere Tharsia adulescens tuorum ipsa hospes ibi effudit Lorem post discipulae venit est in. Iubeo non coepit cognitionis huius dulcis a. Apollinem existimas filiam in lucem in rei completo litus ostendam Apollonio omnino doming.</p>
	</div><!-- Дублирующий первый слой, лучше запраятать в ноиндекс для яндекса --><!-- noindex --><div>
		<img src="01.png" alt="">
		<h1>Умная девушка!</h1>
		<p>Quidditas tuo quid facilisis ex sic ut casus turbata minim venisse in fuerat accidens quam dicentes Is hendrerit ad nomine. Sibi ambulare manu impetum ideo omnibus caecus eum in lucem exempli paupers. Stranguillio ut libertatem deum rogus aegritudinis causet subsannio. per dicis eo dicimus quis nudus iuvenem. Stranguillionis vero rex in modo invenit Boreas quam aniculae morsque nutricem. Iterum non solutionem innocentem vis apud senex lacrimis non coepit. Iriure dolore suas sua confusus eos est cum unde meae sit audivit emere sibi dicit pietate.</p>
	</div><!-- /noindex -->
</div>

Здесь взят принцип работы многих JS слайдеров, а именно клонирование первого слайда. Не забудьте про это!

CSS код оформления точно такой же, как в первом слайдере. Но анимация имеет, как я выше упоминал, небольшую хитрость:

#slider div {
	animation: mymove 20s linear infinite;
	/* Так как мы сдвинулм для FF (см. ниже) слайды,
	то делаем небольшую задержку для первого цикла */
	-moz-animation: mymove 20s linear 3s infinite; /* Firefox */
	-webkit-animation: mymove 20s linear infinite; /* Safari and Chrome */
}

/* Самое сложное просчитать анимацию */
@keyframes mymove {
	0% {top: 0px;}

	22% {top: 0px;}
	25% {top: -300px;}

	47% {top: -300px;}
	50% {top: -600px;}

	72% {top: -600px;}
	75% {top: -900px;}

	97% {top: -900px;}
	99.9999% {top: -1200px;}

	100% {top: 0px;}
}
/* Firefox */
@-moz-keyframes mymove {
	/* Так как Firefox имеет свойство лагать на последнем кадре,
	то для него необходимо сделать возврат
	анимации посредине последнего/первого стоп-кадра.
	По умолчанию, логически верно сделать так же,
	как и для других браузеров. */

	0% {top: 0px;}

	12% {top: 0px;}
	15% {top: -300px;}

	37% {top: -300px;}
	40% {top: -600px;}

	62% {top: -600px;}
	65% {top: -900px;}

	87% {top: -900px;}
	89.9999% {top: -1200px;}

	90% {top: 0px;}
	100% {top: 0px;}
}

/*Safari and Chrome*/
@-webkit-keyframes mymove {
	0% {top: 0px;}

	22% {top: 0px;}
	25% {top: -300px;}

	47% {top: -300px;}
	50% {top: -600px;}

	72% {top: -600px;}
	75% {top: -900px;}

	97% {top: -900px;}
	99.9999% {top: -1200px;}

	100% {top: 0px;}
}

Когда слайдер стоит на последнем слайде, он же дублирующий слайд первого, мы делаем резкий скачек на первый слайд. Этот скачек не заметен…ну кроме FF, там происходит лаг. Поэтому для него сделан немного другой алгоритм. В коде идет описание.