Створіть текстовий ефект Wobbly з JavaScript

Sep 12, 2025

Як

A screenshot from Patrick Heng's website including moving typography

Введення ефектів до тексту та типографіка може додати всю нову перспективу до досвід користувача на веб-сайті. Але текст повинен бути прочитаний, і занадто розумний або розумний ефект, який може перемогти мету.

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

1. Створіть INTRO

Відкрити Файли проекту І ви побачите, що бібліотека Velocity.js і blast.js. Вибух розщеплює текст, тоді як швидкість - це двигун Tween. Існує три змінні зсуву, щоб зробити кожен шматок тексту рухатись у різних інтервалах.

 & lt; сценарій & gt;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
& lt; / script & gt;

2. Розділити текст

Використання вибуху, кожен з текстових символів розділений на свій власний елемент Span. Тоді верхній шар тексту петляється, а зсув збільшується для кожної букви, тому вони самостійно анімація.

 $ ("H1"). Вибух ({
  Делімтер: "Характер"
});
Функція Anim () {
  var $ spans = $ ("# Top"). Знайдіть ("SPAN");
  $ spans.each (функція () {
  Offset1 + = 40;

3. Додайте швидкість

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

 $ (це) .velocity ({
  Перекладний: -100,
  непрозорість: 1
  }, {
  Затримка: Offset1,
  Тривалість: 800,
  Полегшення: "reaceoutback"
  });
  });
}

4. Зателефонуйте до дії

Тепер функція "anim" називається, і це запускає анімацію, щоб почати. Функція "Settimeout" тепер закупорює другий блок тексту, який буде жовтий. Знову ж таки, це спрацьовує за допомогою швидкості, як у першому прикладі.

 Ань ();
etstimeout (функція () {
  var $ spans = $ ("# середня"). Знайти ('span');
  $ spans.each (функція () {
  Offset2 + = 40;
  $ (це) .velocity ({
  Перекладний: -100,
  непрозорість: 0,8
  }, {

5. рухатися далі

Затримка, тривалість та полегшення встановлюються так, щоб другий жовтий текст рухається правильно. Потім останній шматок тексту, який є помаранчевим, контролюється в наступній функції "Налашту", щоб затримати це рухається трохи довше, перш ніж запустити.

 Затримка: Offset2,
  Тривалість: 800,
  Полегшення: "reaceoutback"
  });
  });
}, 100);
etstimeout (функція () {
  var $ spans = $ ("# нижній"). Знайти ('span');

6. Додайте остаточні літери

Тепер остаточні літери переміщуються на місце. Це дає той самий ефект, як Сайт Патріка Хенга , що має шари руху тексту. Patrick насправді використовує WebGL, щоб перемістити текст, але це більш простий спосіб з елементами DOM.

 $ Spans.each (функція () {
  Offset3 + = 40;
  $ (це) .velocity ({
  Перекладний: -100,
  непрозорість: 0,8
  }, {
  Затримка: Offset3,
  Тривалість: 800,
  Полегшення: "reaceoutback"
  });
  });
}, 150);

Дізнайтеся більше, що генеруйте Лондон

Generate graphic — Див. Річард Rutter, Sarah Parmenter та Bruce Lawson, а також більше розмови на Generate London 2018

Richard Rutter має любов і захоплення для типографії та заснованого Шрифт , новаторський веб-шрифт. Як самодостатній веб-типографію євангеліст, Річард є головним організатором очищення Амперсанд Веб-типографічні конференції.

У створенні Лондона 2018 року його майстерня допоможе вам створювати веб-сайти з залученням, відповідною, відмінною, виразною та читаною веб-типографікою, яка адаптується для екранів усіх форм та розмірів. Ви дізнаєтеся, як поєднувати багатовіковий ремесло з найсучаснішою технологією, включаючи змінні шрифти - для розробки та розробки найкращого досвіду для ваших читачів.

Протягом дня ви будете брати участь у практичних заходах, застосовуючи кожну нову техніку до детального прикладу сайту, який ви можете повернути з вами. Це буде сформувати ідеальний ресурс для вас, щоб посилатися на майбутнє. І якщо цього недостатньо, кожен учасник буде ходить з безкоштовною електронною копією відомих річарда Веб-друкарська книга .

Не пропустіть, Отримайте квиток зараз

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

Ідеальний JavaScript в 1000 проектів
Pro цифрові поради для графічних дизайнерів
7 чудових ресурсів веб-типу

Створіть текстовий ефект Wobbly з JavaScript

1. Створіть INTRO

2. Розділити текст

3. Додайте швидкість

4. Зателефонуйте до дії

5. рухатися далі

6. Додайте остаточні літери

Дізнайтеся більше, що генеруйте Лондон

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

Як намалювати кішку

Як малювати барвисте анімаційне мистецтво в Photoshop

Як створити пухнасті мультфільм

Намалюйте портрет стилю мону в Photoshop CC

Намалюйте пухнастий портрет домашніх тварин

Створіть приголомшливі плитні текстури в блендері

Як досконале волосся у ваших портретах

10 Підручники з Houdini

Категорії