Создайте вилетное текстовое действие с помощью JavaScript

Sep 14, 2025

Инструкции

A screenshot from Patrick Heng's website including moving typography

Введение эффектов для текста и типографии может добавить целую новую перспективу Пользовательский опыт на сайте. Но текст должен быть прочитан, и становится слишком умным или умным с эффектом может победить цель этого.

Так что будь умным, будь умным, но убедитесь, что ваш Кинетическая типография эффект на самом деле работает, так же, как он делает на Патрик Хэн сайт - показана на изображении выше. Читайте дальше, чтобы узнать, как ...

1. Создайте вступительный текст

Открой Файлы проекта И вы увидите, что есть Velocity.js и Blast.js библиотека. Взрывные расщепления текста вверх, а скорость является двигателем Tween. Существует три смещенные переменные, чтобы сделать каждый кусок текста двигаться по разным интервалам.

 & lt; скрипт & gt;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
& lt; / script & gt;

2. Разделить текст

Использование взрыва, каждый из текстовых символов разделен в свой собственный элемент промежутка. Тогда верхний слой текста зацикливается, и смещение увеличивается для каждой буквы, поэтому они оживляют независимо.

 $ («H1»). Blast ({
  Разделитель: «Персонаж»
});
Функция Anim () {
  var $ spans = $ ("# топ"). Найти («SPAN»);
  $ spans.each (Функция () {
  Offset1 + = 40;

3. Добавьте скорость

Теперь библиотека скорости добавляет движение и непрозрачность, чтобы буквы двинулись вверх и исчезают. Каждая буква смещена, а продолжительность и ослабление установлено для каждого из букв.

 $ (это) .vverity ({{
  Translatey: -100,
  непрозрачность: 1.
  }, {
  Задержка: Offset1,
  Продолжительность: 800,
  Облегчение: «Открытие»
  });
  });
}

4. Позвоните в действие

Теперь функция «Anim» называется и эта анимация начнется. Функция «SettimeOut» теперь устанавливает второй блок текста, который будет желтым. Опять же, он срабатывает с использованием скорости как в первом примере.

 anim ();
Settimeout (Функция () {
  var $ spans = $ ("# середина"). Найти («SPAN»);
  $ spans.each (Функция () {
  Offset2 + = 40;
  $ (это) .vverocity ({{
  Translatey: -100,
  Непрозрачность: 0,8
  }, {

5. Двигайтесь дальше

Задержка, продолжительность и ослабление установлены так, чтобы второй желтый текст движутся правильно. Затем последний текст, который оранжевый контролируется в следующей функции «SettimeOut», чтобы задержать это немного дольше до начала.

 Задержка: Offset2,
  Продолжительность: 800,
  Облегчение: «Открытие»
  });
  });
}, 100);
Settimeout (Функция () {
  var $ spans = $ ("# Нижние"). Найти («SPAN»);

6. Добавить окончательные буквы

Теперь последние буквы перемещаются на место. Это дает тот же эффект, что и Сайт Патрика Хэнка , который имеет слои движущихся текста. Patrick на самом деле использует WebGL для перемещения текста, но это более простой способ с элементами DOM.

 $ Spans.each (Функция () {
  Offset3 + = 40;
  $ (это) .vverocity ({{
  Translatey: -100,
  Непрозрачность: 0,8
  }, {
  Задержка: Offset3,
  Продолжительность: 800,
  Облегчение: «Открытие»
  });
  });
}, 150);

Узнать больше на Generate London

Generate graphic — Смотрите Ричард Раттер, Сара Памян и Брюс Лоусон и больше разговоров по генерированию Лондон 2018

Ричард Раттер имеет любовь и очарование для типографии и соучреждения Fontdeck , пионерский сервис веб-шрифта. Как самостоятельно назначенный веб-типографии евангелист, Ричард является главным организатором ClearLeft's Ampersand веб-типографии конференции.

На Generate London 2018 его мастерская поможет вам создавать веб-сайты с участием, подходящей, отличительной, выразительной и читаемой типографикой веб-сайтов, которые адаптируются к экранам всех форм и размеров. Вы узнаете, как сочетать многовековых ремесел с передовыми технологиями - включая переменные шрифты - для разработки и разработки лучших впечатлений для ваших читателей.

В течение дня вы будете участвовать в практических мероприятиях, применяя каждую новую технику к подробным примере сайта, который вы можете взять с собой. Это сформирует идеальный ресурс для вас, чтобы ссылаться в будущем. И если этого недостаточно, каждый посетитель уйдет с бесплатной электронной копией известных Ричарда Web Typography Book Отказ

Не пропустите, возьми свой билет сейчас

Статьи по Теме:

Идеальный JavaScript в 1000 проектах
Pro Цифровые Type Tips для графических дизайнеров
7 Великих ресурсов веб-типов

Создайте вилетное текстовое действие с помощью JavaScript

1. Создайте вступительный текст

2. Разделить текст

3. Добавьте скорость

4. Позвоните в действие

5. Двигайтесь дальше

6. Добавить окончательные буквы

Узнать больше на Generate London

Инструкции - Самые популярные статьи

Как добавить анимацию на SVG с CSS

Как реализовать светлые или темные режимы в CSS

Создайте бог лучей в V-Ray

Как нарисовать перья

Создание волновых эффектов с Pixijs

Как управлять классами CSS с JavaScript

сделать реалистичные растения в кино 4D

Покрасить портрет как Ван Гог

Категории