Анимация текста
На сегодняшнем уроке мы создадим особый текстовый эффект. Идея состоит в том, чтобы анимировать отдельные части предложения. Мы будем “менять” некоторые слова предложения с помощью CSS-анимации.
Пожалуйста, обратите внимание: результат этого урока будет работать только в браузерах, поддерживающих CSS анимацию.
Итак, давайте начнем!
HTML-разметка
У нас будет основной контейнер с заголовком второго уровня, который содержит несколько блоков с текстом:
<section class="rw-wrapper"> <h2 class="rw-sentence"> <span>Real poetry is like</span> <span>creating</span> <div class="rw-words rw-words-1"> <span>breathtaking moments</span> <span>lovely sounds</span> <span>incredible magic</span> <span>unseen experiences</span> <span>happy feelings</span> <span>beautiful butterflies</span> </div> <br /> <span>with a silent touch of</span> <div class="rw-words rw-words-2"> <span>sugar</span> <span>spice</span> <span>colors</span> <span>happiness</span> <span>wonder</span> <span>happiness</span> </div> </h2> </section>
Слова внутри блока с классом rw-words будут сменять друг друга. Для этого мы будем использовать CSS анимацию. Мы создадим анимацию для каждого div-а и для каждого span-a, просто она будет срабатывать с разными задержками.
Теперь давайте взглянем на CSS.
CSS3
Во-первых, мы зададим стили для основного контейнера и поместим его в центре страницы:
.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;
}
Блоки будут выводится как inline-элементы, что позволит “вставить” их в предложения, не нарушая верстки:
.rw-words{
display: inline;
text-indent: 10px;
}
Каждый span внутри div-a с классом rw-words будет позиционироваться абсолютно, и мы будем скрывать любое его переполнение (overflow: hidden):
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
}
Теперь мы создадим две анимации. Как упоминалось ранее, мы будем запускать одну и ту же анимацию для всех span-ов в одном div-e, только с разными задержками:
.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 секунд.
Мы должны установить правильный процент значения непрозрачности. Деление 6 на 18 дает нам 0,333 …, это будет 33% от нашего шага keyframe. Все, что мы хотим, чтобы случилось с тегом span, должно произойти перед этим. Таким образом, после просмотра различных вариантов выбираем то, что подходит лучше всего, в результате получаем следующую анимацию для первого слова:
@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; }
}
Мы прячем span и также изменяем его высоту.
Теперь определим анимацию для слов во втором div-e. Мы изменили немного шаги, потому что мы хотим, чтобы эти слова появлялись чуть-чуть позже, чем в первом блоке:
@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; }
}
Вот и все! Есть множество вариантов создания анимации, несколько таких примеров вы можете увидеть ниже!
