Создайте шаткий текстовый эффект с JavaScript

                    

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

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

1. Создайте вводный текст

Откройте файлы проекта, и вы увидите, что есть библиотека velocity.js и blast.js. Взрыв разбивает текст вверх, а скорость — движок движения. Существуют три смещения переменных, чтобы каждый фрагмент текста перемещался с разными интервалами.

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

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

  $ («h1»). Blast ({
  разделитель: «символ»
});
function anim () {
  var $ spans = $ ("# top"). find ('span');
  $ spans.each (function () {
  offset1 + = 40;  

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

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

  $ (Это) .velocity ({
  translateY: -100,
  непрозрачность: 1
  }, {
  delay: offset1,
  продолжительность: 800,
  ослабление: "easeOutBack"
  });
  });
}  

4. Вызвать действие

Теперь вызывается функция «anim», и это запускает анимацию. Функция 'setTimeout' теперь шагает по второму блоку текста, который будет желтым. Опять же, он запускается с использованием скорости, как в первом примере.

  anim ();
setTimeout (function () {
  var $ spans = $ ("# middle"). find ('span');
  $ spans.each (function () {
  offset2 + = 40;
  $ (Это) .velocity ({
  translateY: -100,
  непрозрачность: 0,8
  }, { 

5. Перейти на

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

  delay: offset2,
  продолжительность: 800,
  ослабление: "easeOutBack"
  });
  });
}, 100);
setTimeout (function () {
  var $ spans = $ ("# bottom"). find ('span');  

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

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

  $ spans.each (function () {
  offset3 + = 40;
  $ (Это) .velocity ({
  translateY: -100,
  непрозрачность: 0,8
  }, {
  delay: offset3,
  продолжительность: 800,
  ослабление: "easeOutBack"
  });
  });
},  

Подробнее о Generate London

См. Ричард Раттер, Сара Парментер и Брюс Лоусон и больше говорят на Generator London 2018