Все для веб-дизайнера
Текстовые сцены с применением анимации CSS
В данном уроке мы рассмотрим как реализовать красивую смену текста с эффектами плавного перехода и фокусировки, кроме этого текст будет изменять размеры, это будет создать иллюзию растворения и полета текста. Все что нам понадобится это только трансформации css, фильтры и прочие фишки. Следует отметить, что данный урок это просто эксперимент, мы пытаемся показать все возможности работы со стилями, по этому кроссбраузерности не всегда получается добиться. И так, давайте посмотрим, что у нас получилось.
Шаг 1. HTML
Для начала нам понадобится набор текста, который будет последовательно появляться:
|
1 2 3 4 5 6 7 8 9 10 |
<div> <h2>Sometimes it's better</h2> <h2>to hide</h2> <h2>in order to</h2> <h2>survive evil</h2> <h2>Thanatos</h2> <h2>This fall</h2> <h2>Prepare</h2> <h2>Refresh to replay</h2> </div> |
Теперь давайте поместим каждую букву в отдельный span элемент. Сделаем это динамически, с помощью jQuery:
|
1 |
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering(); |
Теперь нам нужно применить код указанный выше:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div id="os-phrases"> <h2> <span> <span> <span> S </span> </span> <span> <span> o </span> </span> <span> <span> m </span> </span> <!-- ... --> </span> <!-- /word1 --> <!-- ... --> </h2> <h2> <!-- ... --> </h2> <!-- ... --> </div> |
Мы будем использовать небольшой скрипт lettering.js. Также, в перспективе, мы хотим, чтобы буквы несколько поворачивались.
Шаг 2. CSS
Обратите внимание, что префиксы убраны, по этому полный код можно просмотреть в исходниках. И так, нам необходимо, чтобы текст занимал всю ширину монитора:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.os-phrases h2 { font-family: 'Dosis', 'Lato', sans-serif; font-size: 70px; font-weight: 200; height: 100%; width: 100%; overflow: hidden; text-transform: uppercase; padding: 0; margin: 0; position: absolute; top: 0; left: 0; letter-spacing: 14px; text-align: center; } |
Также мы хотим, чтобы наши фразы были расположены в центре относительно всех сторон. Для этого мы будем использовать свойство flexbox:
|
1 2 3 4 5 6 7 8 9 |
.os-phrases h2, .os-phrases h2 > span { height: 100%; /* Centering with flexbox */ display: flex; flex-direction: row; justify-content: center; align-items: center; } |
Добавим небольшое расстояние между словами:
|
1 2 3 |
.os-phrases h2 > span { margin: 0 15px; } |
Необходимо добавить опцию перспективы для первой буквы:
|
1 2 3 4 5 |
.os-phrases h2 > span > span { display: inline-block; perspective: 1000px; transform-origin: 50% 50%; } |
Изначально все буквы будут прозрачными. Анимация будет длиться 5.2 секунды:
|
1 2 3 4 5 6 7 |
.os-phrases h2 > span > span > span { display: inline-block; color: hsla(0,0%,0%,0); transform-style: preserve-3d; transform: translate3d(0,0,0); animation: OpeningSequence 5.2s linear forwards; } |
Первые предложения будут сменяться медленнее, а последние — быстрее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.os-phrases h2:nth-child(2) > span > span > span { animation-delay: 5s; } .os-phrases h2:nth-child(3) > span > span > span { animation-delay: 10s; } .os-phrases h2:nth-child(4) > span > span > span { animation-delay: 15s; } .os-phrases h2:nth-child(5) > span > span > span { font-size: 150px; animation-delay: 21s; animation-duration: 8s; } .os-phrases h2:nth-child(6) > span > span > span { animation-delay: 30s; } .os-phrases h2:nth-child(7) > span > span > span { animation-delay: 34s; } |
Также буквы будут повёрнуты по оси Y. Также поиграемся с чёткостью букв:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@keyframes OpeningSequence { 0% { text-shadow: 0 0 50px #fff; letter-spacing: 80px; opacity: 0.2; transform: rotateY(-90deg); } 50% { text-shadow: 0 0 1px #fff; letter-spacing: 14px; opacity: 0.8; transform: rotateY(0deg); } 85% { text-shadow: 0 0 1px #fff; opacity: 0.8; transform: rotateY(0deg) translateZ(100px); } 100% { text-shadow: 0 0 10px #fff; opacity: 0; transform: translateZ(130px); pointer-events: none; } } |
Для последнего предложения зададим другую анимацию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.os-phrases h2:nth-child(8) > span > span > span { font-size: 30px; animation: FadeIn 4s linear 40s forwards; } @keyframes FadeIn { 0% { opacity: 0; text-shadow: 0 0 50px #fff; } 100% { opacity: 0.8; text-shadow: 0 0 1px #fff; } } |
Также сделаем некоторые слова жирным шрифтом:
|
1 2 3 4 5 6 |
/* Bold words */ .os-phrases h2:first-child .word3, .os-phrases h2:nth-child(2) .word2, .os-phrases h2:nth-child(4) .word2 { font-weight: 600; } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 10.06.2013 в 09:22, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
