Как создать тонкие анимированные текстовые отверстия

kak sozdat tonkie animirovannye tekstovye otverstiya

Вы когда-нибудь видели тонкие текстовые отверстия и задавались вопросом, как они появились?

Их так много, и практически невозможно объяснить, как они все трудятся.

Однако давайте выберем пример, и я покажу вам, как его воспроизвести.

Я уже сделал выбор, и вот что мы будем строить:

FOFdXz3y3MYBQM7vP2hUk1NY78dHfwX9a8j0
Демо

Это текстовое открытие для фиктивного креативного агентства. Вы можете просмотреть результаты здесь.

Вы видите вспышку, да? Вы также видите, как анимация расположена в шахматном порядке — вместо того, чтобы анимировать весь текст сразу, у каждого слова в тексте есть разное время?

Я покажу вам, как их воспроизвести.

Улыбнитесь. Вам это понравится!

Введение

Никто не любит уродливую наценку. На самом деле, мы не будем писать много разметки. Давайте просто воспроизведем эту анимацию.

Во-первых, возьмите свою толстовку (если она у вас есть) и наденьте шляпу для разработчиков (вы должны иметь одну из них).

Теперь разрешите мне шаг за шагом провести вас. Это не сложно, если честно.

1. Введите требуемую простую разметку.

<section class="opening">  <h1 class="opening-text">    We are a creative agency  </h1></section>
2SQawUW3As3NPhLnHML1AUqeFQlwdjBI9rvl

2. Добавьте фоновое изображение.

.opening {  background-image: url('  }
OI9ZHoWdw5BckRO3X842MxaG-mDfwPt7R3In

Ниже приведен результат этого:

2XqScjEr75qscBxx0kubqwp-dNzjFGQaZiKq
Мы начали с нуля. Мы здесь!

Результат выглядит неловко, поскольку фоновое изображение повторяется.

3. Прекратите повторение и сделайте фоновое изображение более красивым.

.opening {  height: 100vh;  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.9)), url(' no-repeat 50% 0%/cover;  }
DHuZ57bFKOGOGv5kvqNR8oTsSrKsIRu1WOY6
Это выглядит беспорядочно 🙁

Если вы не понимаете приведенный выше код, это зависит от того, что с помощью CSS к элементу можно добавить несколько фонов. Эти фоны должны быть разделены запятой. В приведенном выше примере linear-gradient представляет один фон, а url(..) другие. Один добавляет линейный градиент, другой – изображение.

Посмотрите на иллюстрацию выше. Теперь это должно иметь больше смысла.

Все еще путаетесь? Задавайте мне какие-либо вопросы в разделе комментариев, когда мы идем дальше.

jOPP-niRSksv16eptLDRa-PL9kp18XbSRg9V
Вот результат! => Фоновое изображение теперь наложено тонким градиентом. Очень круто, а?

4. Разместите текстовое содержимое в центре.

Используйте Flexbox!

.opening {  ...  display: flex;  justify-content: center;  align-items: center;}
KQgGegIrFbxhLixaORQ5RqLBfbR1xmD7F8Rp
Я скопировал это изображение из другой статьи, если вы не знаете, как работает Flexbox. Выберите требуемую часть.
plI1Nlc3XHCm4fs0Ue-aSUjJucOgtzU2W0Jm
Теперь текст идеально отцентрирован. Ура!

5. Перед анимацией сделайте текст хорошим.

.opening-text {  margin: 0;  color: rgba(255,255,255,0.6);  text-transform: uppercase;  font-size: 3.6rem;  text-align: center;}
ZDHspwHmPX66WNtl1Qpu5vlWgysR9qhcna6L
Вы получили это!
sBdFA96mIu-lGjmvvuKFyrBXta2MlM1jW5Nc
Эй! Мы прогрессируем. Выглядит хорошо?

6. Подготовьтесь к анимации!

Если вы посмотрите на конечный результат, то заметите, что каждое слово в предложении анимировано в сцену. Нам необходим способ разделить слова на отдельные элементы.

Давайте разберемся с этим с помощью JavaScript.

В двух словах, вот графическое изображение того, что мы хотим сделать.

PoAq4uC0vCRA23ELwt8Sdp20SZ2OHBI4-GvZ
Нам нужно обратить каждое слово в элемент .

Теперь вы понимаете задачу.

И вот код для этого. Надеюсь, вам удобно работать с JavaScript, потому что я собираюсь бросить вам немного.

const textNode = document.querySelector('.opening-text');const splitTextArr = textNode.innerText.split(" ");
let finalMarkup = "";splitTextArr.forEach(buildMarkup);function buildMarkup(text, index) {  let spanText;
  (index === 2) ?   spanText = "<span>" + text + "</span><br />" :   spanText = "<span>" + text + "</span> ";    return finalMarkup += spanText;}/** Substitute the previous content for the new markup with span elements */textNode.innerHTML = finalMarkup;

Это не слишком много для понимания, но я пошел вперед и проиллюстрировал происходящее.

06lqH-ZIXHxwaKby7cEFqYNLqXtfXY6rNpE9
Теперь немного больше смысла?

NB: В пределах buildMarkup функцию, я пошел вперед и добавил a <br /> после третьего слова. Это гарантирует, что текст будет разбиваться, а не оставаться в одной строке.

7. Напишите ключевые кадры

@keyframes hide {    from { opacity: 1; }    to { opacity: 0; }}@keyframes glow {    from { text-shadow: 0 0 14rem white; }    to { text-shadow: 0 0 0 white; }}

Есть две разные анимации, которые нам нужны для конечного эффекта. Один, тот hide анимация, а другой, the glow анимация.

cmeqklfx575gwke24yifzPXbOe9CjTVY0SZz

Если вы не знаете, как работают CSS-анимации, пройдите мой расширенный курс CSS – это простое дело. В двух словах, анимация в значительной степени обеспечивается keyframes.

В блоке ключевого кадра вы определяете изменение свойств элемента с течением времени.

HyHSpQLnuuEbQZDJNIQ6Hb9U4ySsYICfrWgL

Просмотрите код выше. Даже если вы плохо разбираетесь в CSS-анимации, я уверен, что вы можете что-нибудь понять.

8. Примените анимацию к элементам

.opening-text span {  opacity: 0;  animation:     hide 8s ease-in-out infinite,     glow 8s ease-in-out infinite;}
f8Gjpf8V3gd61-JBoxaoH9zQkLed9SR-UvBG
zCzQJ6XHd5FolHNEWuWSZdp3BXNzxCy0oBG8
Мы здесь!

Выглядит хорошо?

Вот небольшое объяснение.

CSS text-shadow свойство используется для создания эффекта вспышки в тексте. Если вы не знаете как text-shadowработает, посмотрите ссылку на codrops. Несмотря на то, что я писал CSS годами, я тоже искал его для обновления.

Мы в этом вместе!

9. Наконец смещайте анимацию для тонкого потрясающего эффекта.

.opening-text span:nth-child(6n) {    animation-delay: 900ms; }.opening-text span:nth-child(6n-1) {    animation-delay: 700ms; }.opening-text span:nth-child(6n-3) {    animation-delay: 600ms; }.opening-text span:nth-child(6n-4) {    animation-delay: 300ms; }.opening-text span:nth-child(6n-5) {    animation-delay: 0s; }

После завертывания каждого слова в a span элемент, .opening-text теперь содержит шесть элементов. Каждый нацелен с помощью nth-child селектор. Заменитель n = 1 в селекторах выше. Вы поймете это.

EtnyKhMxDTNp9NNsnL0BTXWsqxCSvjRS42J0

Я поленился, но я уверен, что если вы потратите еще немного времени на настройку значений, у вас будет лучшая анимация.

Да, мы это сделали?

Где-то застрял?

Дайте мне знать в комментариях, и я рад помочь.

Готовы стать профессионалом?

Я создал бесплатное руководство по CSS, чтобы немедленно развить ваши навыки CSS. Получите бесплатную электронную книгу.

Gg2sddawCgEIDygcY3rnjnZ1uaS4G172lEwG
Семь секретов CSS, о которых вы не знали

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *