Эффект искажения текста с использованием Blotter.js

Некоторые эксперименты по искажению текста с использованием библиотеки Blotter.js. Идея состоит в том, чтобы искажать текст при прокрутке или перемещении мыши.

Эффекты искажения стали довольно популярными за последние два года, и теперь многие необычные дизайны веб-сайтов имеют уникальную форму этой интригующей тенденции. Сегодня мы хотим поделиться с вами двумя демонстрациями, показывающими, как использовать Blotter, API с поддержкой Three.js и Underscore.js для рисования художественных текстовых эффектов. Мы использовали его для искажения текста при прокрутке и перемещении мыши.

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

Если вам понравится этот небольшой эксперимент, вам также могут понравиться эффекты искажения жидкости Янниса или эффекты наведения искажения Робина WebGL или анимированные эффекты искажения тепла Лукаса с WebGL.

Внимание: Обратите внимание, что это экспериментально и мы используем современные свойства CSS, которые могут не поддерживаться в старых браузерах.

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

Основная идея наших демонстраций — изменить значение униформы материала при прокрутке страницы. Чем быстрее прокрутка, тем больше меняется значение. Вот упрощенный пример того, как этого добиться:

   текст здесь   

  const MathUtils = {
  // Уравнение прямой.
  lineEq: (y2, y1, x2, x1, currentVal) => {
    var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
    вернуть m * currentVal + b;
  },
  // Линейная интерполяционная функция.
  lerp: (a, b, n) => (1 - n) * a + n * b
};

// Создать блоттерный материал.
const material = new Blotter.LiquidDistortMaterial ();
// Установить стандартные унифицированные значения материала.
material.uniforms.uSpeed.value = .5;
material.uniforms.uVolatility.value = 0;
material.uniforms.uSeed.value = 0,4;
// Создать экземпляр Blotter.
const blotter = новый блоттер (материал);
// Инициализируем Blotter Text для всех элементов HTML с помощью data-blotter.
const blotterElems = [...document.querySelectorAll('[data-blotter] ')];
blotterElems.forEach ((el) => {
  const text = new Blotter.Text (el.innerHTML);
  blotter.addText (текст);
  // Теперь удаляем HTML-контент.
  el.innerHTML = '';
  // Созданный холст.
  const scope = blotter.forText (text);
  // Добавляем его к основному элементу.
  scope.appendTo (эл);
});

// Теперь, измените одно (или более) равномерное значение при прокрутке.
// Чем быстрее прокрутка, тем больше изменяется значение.
let currentScroll = window.pageYOffset;
// Волатильность - это форма, которая изменится.
пусть волатильность = 0;
// Она будет изменяться с 0 (без прокрутки) на 0,9 (прокрутка со скоростью maxscroll).
const maxscroll = 10;
constiformValuesRange = [0,0.9];
// Использование requestAnimationFrame + линейная интерполяция для эффекта.
const render = () => {
  // Текущая позиция прокрутки
  const newScroll = window.pageYOffset;
  // Сколько было прокручено с последнего перекраса.
  const scrolled = Math.abs (newScroll - currentScroll);
  // Получить новое значение волатильности.
  volatility = MathUtils.lerp (volatility, Math.min (MathUtils.lineEq (iformValuesRange [1] ,iformValuesRange [0]maxscroll, 0, прокрутка), 0,9), 0,05);
  // Устанавливаем волатильность.
  material.uniforms.uVolatility.value = волатильность;
  // Обновить текущую прокрутку.
  currentScroll = newScroll;
  // Повторение.
  requestAnimationFrame (визуализация);
}
requestAnimationFrame (визуализации);  

В первой демонстрации скорость прокрутки определяет величину искажения: