Створіть анімований текстовий ефект "

Sep 12, 2025

Як

Додавання ефектів до тексту може додати весь новий рівень залучення та відсотки. Ефекти, як кінетична типографія захопить увагу глядача, допомога досвід користувача і допомогти розповісти історію, яку кажуть. Текстовий ефект на Робити чудеса Сайт приносить веб-шрифт в лінію фокусу за лінією. Читайте далі, щоб дізнатись, як відтворити щось подібне.

Отримати Файли проекту Щоб допомогти до цього підручника.

01. Ініціювати документ HTML

Першим кроком - визначити структуру документа, яка буде зберігати вміст HTML. Це складається з контейнера для документів, в якому зберігається розділи голови та тіла. Незважаючи на те, що розділ Head зберігає чорнив до зовнішніх ресурсів CSS та JavaScript, тіло зберігає видимий вміст, створений на кроці 02.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; blur text & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
  *** Крок 2 Тут
& lt; / body & gt;
& lt; / html & gt;

02. HTML-вміст

Цей крок визначає видимий вміст HTML. Візьміть увагу на те, як тексти, призначені для того, щоб ефект розмивання, що містяться в контейнері, який має клас "розмиття". Цей клас використовується JavaScript, щоб посилатися на текстові елементи на кроці 03, а також CSS на більш пізніх кроках.

 & lt; h2 & gt;
  Дисципліна походить від
  & lt; ul class = "blur" & gt;
  & lt; li & gt; зобов'язання & lt; / li & gt;
  & lt; li & gt; наполегливість & lt; / li & gt;
  & lt; li & gt; відданість & lt; / li & gt;
  & lt; li & gt; навчання & lt; / li & gt;
  & lt; li & gt; аспірація & lt; / li & gt;
  & lt; li & gt; освіта & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Автоматизована затримка анімації

Створіть новий файл під назвою "code.js". Кожен елемент всередині контейнера розмивання повинен бути представлений через три секунди після попереднього елемента. JavaScript використовується для автоматизації застосування унікальних атрибутів CSS. Першим кроком полягає в тому, щоб вибрати всі елементи першого рівня всередині контейнера Blur - після завантаження сторінки.

 Window.addeventlistener ("Навантаження", функція () {
  var nodes = document.queryseelcall (". blur & gt; *");
  *** Крок 4 Тут
});

04. Кількість секунд

A "Для" петля використовується для посилання кожного елемента, повернувшись до змінної "вузлів" на попередньому кроці. Для розрахунку кількості секунд використовується лічильник індексу лічильника "для" для призначення атрибуту затримки анімації. Як результат, кожен елемент має затримку, яка три секунди довше, ніж попередній елемент.

 для (var i = 0; i & lt; вузли .length; i ++) {
  вузли [i] .style.animationdelay = (i * 3) + "s";
}

05. CSS blur

Створіть новий файл під назвою "Styles.css". Перший крок для визначення правил презентації CSS ініціює кожен з текстових елементів як невидимий. Також застосовується анімація, яка називається "анімаціябрура", яка буде анімація елемента перегляду протягом п'яти-секундної тривалості. Режим анімації повинен бути встановлений на "Вперед", щоб він зупинився на останньому кадрі.

 .blur & gt; * {
  непрозорість: 0;
  Анімація: анімація 5S вперед;
}

06. Ініціювати анімацію

Анімація, що застосовується до елементів "розмиття" на етапі 5, визначається на цьому етапі. Посилання на "AnimationBlur" зроблена як анімація клавіш. Перший кадр "від" встановлює елементи, як видно з текстовою тіні - але з прозорим текстовим кольором. Це те, що виробляє розмитий текстовий ефект.

 @KeyFrames AnimateBlur {
  від {
  непрозорість: 1;
  Текстова тінь: 0 0 1EM RGBA (0,0,0, .5);
  Колір: RGBA (0,0,0,0);
  }
    *** Крок 7 Тут
}

07. Остаточна анімаційна рамка

Рамка "до" в анімації визначає остаточний кадр, який текст буде анімований. Цей кадр встановлює тінь тексту, щоб зникнути разом із текстовим кольором, який повністю видно. У поєднанні з кроком 06, анімаційні кадри між "від" та "до" будуть автоматично розраховані за допомогою браузера.

 до {
  непрозорість: 1;
  Текстова тінь: 0 0 0PX RGBA (0,0,0,0);
  Колір: # 000;
}

Ця стаття спочатку з'явилася в журналі Web Designer. Підписатися тут .

Пам'ятайте - завжди думайте про користувача

Generate - the conference for web designers

При введенні фантастичних ефектів до сторінки вона повинна мати мету, вам потрібно думати про досвід користувачів.І це те, що Freelance Front-Endure Ui розробник Sara Soueidan буде розкривати у неї "Використання CSS (і SVG) за те, що розмовляє UX Генерувати Лондон 2018 .

У своїй розмові вона збирається показати широкий спектр можливостей, які CSS пропонує покращити загальний досвід користувачів вашого інтерфейсу користувача, використовуючи CSS (з посипами SVG та JS тут і там).

Переконайтеся, що ви не пропустіть. Отримайте квиток зараз.

Пов'язані статті:

Створіть текстовий ефект з JavaScript
Створіть світловий текстовий ефект
Як зробити текст відтворювати відмінно

Створіть анімований текстовий ефект "

01. Ініціювати документ HTML

02. HTML-вміст

03. Автоматизована затримка анімації

04. Кількість секунд

05. CSS blur

06. Ініціювати анімацію

07. Остаточна анімаційна рамка

Пам'ятайте - завжди думайте про користувача

Як - Найпопулярніші статті

Як очистити пензлі: остаточний довідник

Як зробити Apple Watch App

Chiaroscuro art: покроковий посібник

Створіть 3D-текст у Photoshop: покроковий посібник

Як створити анімований ефект типу

Як створити фотореалістичну сцену

Як побудувати швидкі веб-сайти

Як поєднувати кольорові олівці

Категорії