Красивая сцена с применением CSS анимации
Идея данного урока заключается в том, чтобы создать небольшую сцену, используя CSS анимацию, фильтры и прочие фишки. Данный урок - это просто эксперимент.
Для начала нам понадобится набор предложений, которые будут последовательно появляться друг за другом:
<div class="os-phrases"> <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:
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();
Применение кода, указанного выше:
<div class="os-phrases" id="os-phrases"> <h2> <span class="word1"> <span class="char1"> <span class="char1"> S </span> </span> <span class="char2"> <span class="char1"> o </span> </span> <span class="char3"> <span class="char1"> m </span> </span> <!-- ... --> </span> <!-- /word1 --> <!-- ... --> </h2> <h2> <!-- ... --> </h2> <!-- ... --> </div>
Для достижения данного эффекта мы воспользовались скриптом lettering.js. Также, в перспективе, мы хотим, чтобы буквы несколько поворачивались.
Теперь можно приступить к оформлению наших букв.
Внимание! Все префиксы браузеров были убраны. Полный код сможете найти в исходниках.
Наши фразы будут занимать всё доступное пространство монитора:
.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:
.os-phrases h2, .os-phrases h2 > span { height: 100%; /* Centering with flexbox */ display: flex; flex-direction: row; justify-content: center; align-items: center; }
По умолчанию, значение опции flex-wrap равно nowrap, поэтому нам не нужно её включать.
Давайте добавим небольшое расстояние между словами:
.os-phrases h2 > span { margin: 0 15px; }
Добавим опцию перспективы для первой буквы:
.os-phrases h2 > span > span { display: inline-block; perspective: 1000px; transform-origin: 50% 50%; }
Изначально все буквы будут прозрачными. Анимация будет длиться 5.2 секунды:
.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; }
Также нам нужно задать значение задержкам, которые будут активироваться между появлением разных фраз. Первые предложения будут сменяться медленнее, а последние - быстрее.
.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. Также поиграемся с чёткостью букв.
@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; } }
Для последнего предложения зададим другую анимацию:
.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; } }
В последнюю очередь, некоторые слова сделаем жирными:
/* 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; }
Вот и всё. Можем смотреть на то, что получилось.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/mq-j5waymYw/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
"Тот, кто в совершенстве овладеет электронной почтой, будет миллионером в двадцать первом веке." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.