Главная->Уроки по css->Меняем слова в предложениях с помощью CSS3

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

06 Окт в 00:00

В данном уроке сделаем эффект для типографики. Идея заключается в манипулировании частью предложения. Определенные слова будут меняться с помощью анимаций CSS. Следующий код соответствует демонстрации 2. Разметка HTML У нас есть основной контейнер с заголовоком h2, в котором содержится предложение в элементах span и два раздела для меняющихся слов: 01 <section class="rw-wrapper"> 02 <h2 class="rw-sentence"> 03 <span>Настоящая поэзия похожа</span> 04 <br /> 05 <span> на создание</span> 06 <div class="rw-words rw-words-1"> 07 <span>захватывающих дух моментов</span> 08 <span>звуков любви</span> 09 <span>невероятной магии</span> 10 <span>уникального опыта</span> 11 <span>мгновений счастья</span> 12 <span>прекрасной бабочкиы</span> 13 </div> 14 <br /> 15 <span>легкими касаниями</span> 16 <div class="rw-words rw-words-2"> 17 <span>пространства</span> 18 <span>цвета</span> 19 <span>счастья</span> 20 <span>чуда</span> 21 <span>вдохновенья</span> 22 <span>удачи</span> 23 </div> 24 </h2> 25 </section> Нужно, чтобы каждый элемент span в разделе с классом rw-words появлялся на некоторое время по очереди. Для решения задачи будем использовать анимации CSS. Создадим одну анимацию для каждого раздела и каждого элемента span, но с разными задержками. CSS Для начала определим стили для основного контейнера и отцентрируем его на странице: 1 .rw-wrapper{ 2 width: 80%; 3 position: relative; 4 margin: 110px auto 0 auto; 5 font-family: 'Bree Serif'; 6 padding: 10px; 7 } Добавим тени для текста во всех элементах заголовка: 1 .rw-sentence{ 2 margin: 0; 3 text-align: left; 4 text-shadow: 1px 1px 1px rgba(255,255,255,0.8); 5 } Определяем стили текста в элементах span: 1 .rw-sentence span{ 2 color: #444; 3 white-space: nowrap; 4 font-size: 200%; 5 font-weight: normal; 6 } Элементы div будут выводиться как строчные, что позволит нам вставлять их в предложения без разрыва шаблона: 1 .rw-words{ 2 display: inline; 3 text-indent: 10px; 4 } Каждый элемент span в разделе с классом rw-words будет позиционироваться абсолютно и мы будем скрывать все выступающие части: 1 .rw-words span{ 2 position: absolute; 3 opacity: 0; 4 overflow: hidden; 5 width: 100%; 6 color: #6b969d; 7 } Теперь запускаем две анимации . Одна анимация будет использоваться для всех элементов span в разделе, но с разными задержками: 01 .rw-words-1 span{ 02 animation: rotateWordsFirst 18s linear infinite 0s; 03 } 04 .rw-words-2 span{ 05 animation: rotateWordsSecond 18s linear infinite 0s; 06 } 07 .rw-words span:nth-child(2) { 08 animation-delay: 3s; 09 color: #6b889d; 10 } 11 .rw-words span:nth-child(3) { 12 animation-delay: 6s; 13 color: #6b739d; 14 } 15 .rw-words span:nth-child(4) { 16 animation-delay: 9s; 17 color: #7a6b9d; 18 } 19 .rw-words span:nth-child(5) { 20 animation-delay: 12s; 21 color: #8d6b9d; 22 } 23 .rw-words span:nth-child(6) { 24 animation-delay: 15s; 25 color: #9b6b9d; 26 } Наши анимации выполняют один цикл, показывая каждый элемент span в течении трех секунд (время задержки). Вся анимация выполняется 6 (количество слов) * 3 (время вывода каждого слова) = 18 секунд. Нужно установить правильное значение для свойства непрозрачности в разных кадрах анимации (то есть когда будет виден элемент span). Делим 6 на 18 и получаем 0.333, что дает 33% от всего времени анимации. Вот что получается для анимации первого слова: 1 @keyframes rotateWordsFirst { 2 0% { opacity: 1; animation-timing-function: ease-in; height: 0px; } 3 8% { opacity: 1; height: 60px; } 4 19% { opacity: 1; height: 60px; } 5 25% { opacity: 0; height: 60px; } 6 100% { opacity: 0; } 7 } Будет анимироватся процесс появления слова и изменение высоты элемента. Анимация для второй части также будет проявлять слово и изменение его ширины. Здесь используется небольшой шаг в процентном отношении анимации, поэтому следующее слово будет появляться немного позже исчезновения предыдущего: 1 @keyframes rotateWordsSecond { 2 0% { opacity: 1; animation-timing-function: ease-in; width: 0px; } 3 10% { opacity: 0.3; width: 0px; } 4 20% { opacity: 1; width: 100%; } 5 27% { opacity: 0; width: 100%; } 6 100% { opacity: 0; } 7 } Готово!