Меняем слова в предложениях с помощью CSS3

В данном уроке сделаем эффект для типографики. Идея заключается в манипулировании частью предложения. Определенные слова будут меняться с помощью анимаций CSS.

Следующий код соответствует демонстрации 2.

 

Разметка HTML

У нас есть основной контейнер с заголовоком h2, в котором содержится предложение в элементах span и два раздела для меняющихся слов:

			<section class="rw-wrapper">
				<h2 class="rw-sentence">
					<span>Настоящая поэзия похожа</span>
					<br />
					<span> на создание</span>
					<div class="rw-words rw-words-1">
						<span>захватывающих дух моментов</span>
						<span>звуков любви</span>
						<span>невероятной магии</span>
						<span>уникального опыта</span>
						<span>мгновений счастья</span>
						<span>прекрасной бабочкиы</span>
					</div>
					<br />
					<span>легкими касаниями</span>
					<div class="rw-words rw-words-2">
						<span>пространства</span>
						<span>цвета</span>
						<span>счастья</span>
						<span>чуда</span>
						<span>вдохновенья</span>
						<span>удачи</span>
					</div>
				</h2>
			</section>

Нужно, чтобы каждый элемент span в разделе с классом  rw-words появлялся на некоторое время по очереди. Для решения задачи будем использовать анимации CSS. Создадим  одну анимацию для каждого раздела и каждого элемента span, но с разными задержками.

 

CSS

Для начала определим стили для основного контейнера и отцентрируем его на странице:

.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: 'Bree Serif';
    padding: 10px;
}

Добавим тени для текста во всех элементах заголовка:

.rw-sentence{
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Определяем стили текста в элементах span:

.rw-sentence span{
    color: #444;
    white-space: nowrap;
    font-size: 200%;
    font-weight: normal;
}

Элементы div будут выводиться как строчные, что позволит нам вставлять их в предложения без разрыва шаблона:

.rw-words{
    display: inline;
    text-indent: 10px;
}

Каждый элемент span в разделе с классом rw-words будет позиционироваться абсолютно и мы будем скрывать все выступающие части:

.rw-words span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    color: #6b969d;
}

Теперь запускаем две анимации . Одна анимация будет использоваться для всех элементов span в разделе, но с разными задержками:

.rw-words-1 span{
    animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
    animation-delay: 3s;
    color: #6b889d;
}
.rw-words span:nth-child(3) {
    animation-delay: 6s;
    color: #6b739d;
}
.rw-words span:nth-child(4) {
    animation-delay: 9s;
    color: #7a6b9d;
}
.rw-words span:nth-child(5) {
    animation-delay: 12s;
    color: #8d6b9d;
}
.rw-words span:nth-child(6) {
    animation-delay: 15s;
    color: #9b6b9d;
}

Наши анимации выполняют один цикл, показывая каждый элемент span в течении трех секунд (время задержки). Вся анимация выполняется 6 (количество слов) * 3 (время вывода каждого слова) = 18 секунд. Нужно установить правильное значение для свойства непрозрачности в разных кадрах анимации (то есть когда будет виден элемент span). Делим 6 на 18 и получаем 0.333, что дает 33% от всего времени анимации. Вот что получается для анимации первого слова:

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

Будет анимироватся процесс появления слова и изменение высоты элемента.

Анимация для второй части также будет проявлять слово и изменение его ширины. Здесь используется небольшой шаг в процентном отношении анимации, поэтому следующее слово будет появляться немного позже исчезновения предыдущего:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

Готово!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/p_ulE9RJWxU/lessons.php

Статьи по теме

Дайджест новых статей по интернет-маркетингу на ваш email

Меняем слова в предложениях с помощью CSS3 | | 2012-06-19 11:58:22 | | Статьи Web-мастеру | | В данном уроке сделаем эффект для типографики. Идея заключается в манипулировании частью предложения. Определенные слова будут меняться с помощью анимаций CSS.Следующий код соответствует демонстрации | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться статьей: