Сделайте интерактивные эффекты 3D типографии

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

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

Если вы хотите создать внимательный сайт с нулевой суетой, попробуйте Строитель сайта тоже. И убедитесь, что производительность вашего сайта оптимизирована с верхом веб хостинг Отказ

• 3D шрифты: 9 Top Type Tips

В этом уроке эффект типа будет использовать фигуры букв как маска для некоторых быстрых, свободно текущих следов частиц, которые будут динамически завихнуть и двигаться через буквы. Будет не только будет эта прекрасная анимация, но, как это будет оказано на HTML5 Canvas Элемент, это будет преобразуется в 3D, чтобы вращаться к мышью, так как он движется по экрану. Это идеально подходит для заголовков сайта или только тогда, когда вам нужно схватить внимание пользователя на призыв к действию.

Загрузите учебные посылки здесь

01. Начните процесс

Откройте папку «Пуск» из файлов проекта в своем кодовом IDE. Проект собирается начать с создания классов объекта частиц. Это будет использоваться для создания текущих изображений в тексте в проекте. Откройте файл «Sketch.js» и добавьте следующую переменную, чтобы начать создание базовой частицы.

 Функциональная частица () {
  this.pos = Createvector (случайная (ширина), случайная ((высота - 100)));
  this.vel = Createvector (0, 0);
  this.acc = Createvector (0, 0);
  this.maxspeed = maxspeed;
  this.provpos = this.pos.copy (); 

02. Обновите частицу

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

 this.update = Функция () {
  this.vel.add (this.acc);
  this.vel.limit (this.maxspeed);
  this.pos.add (this.vel);
  this.acc.mult (0);
  } 

03. Иди с потоком

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

 this.follow = Функция (векторы) {
  var x = пол (this.pos.x / scl);
  var y = пол (tospos.y / scl);
  var index = x + y * cols;
  var force = векторы [индекс];
  this.applyForce (Force);
  } 

04. Следуйте, но не слишком близко

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

 IS.SCatter = Функция (векторы) {
  this.pos.x + = случайный (-0,9, 0,9);
  this.pos.y + = случайный (-0,9, 0,9);
  }
  this.applyForce = Функция (сила) {
  this.acc.add (сила);
  } 

05. Показать частицу

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

 Это .show = Функция () {
  ход (180);
  взмослевая (1);
  строка (tospos.x, this.pos.y, this.provpos.x, this.provposs.y);
  this.updatePrev ();
  }
  this.updatePrev = Функция () {
  this.provpos.x = this.pos.x;
  this.prevposs.y = this.pos.y;
  } 

06. Оберните вокруг

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

 This.eges = Функция () {
  Если (this.pos.x & gt; ширина) {
  this.pos.x = 0;
  this.updatePrev ();
  }
  Если (this.pos.x & lt; 0) {
  this.pos.x = ширина;
  this.updatePrev ();
  } 

07. Наслаждение обертки

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

 Если (tospos.y & gt; высота) {
  this.pos.y = 0;
  this.updatePrev ();
  }
  Если (this.pos.y & lt; 0) {
  this.pos.y = высота;
  this.updatePrev ();
  }
  }
} 

08. Сделайте много частиц

Теперь, когда частица создана, пришло время подумать о том, чтобы сделать много частиц. Для этого весь наш код может пойти выше класса функций частиц. Здесь ряд глобальных переменных объявляется, чтобы система запустила систему. Они будут вызваны в разное время во время кода, поэтому они могут быть изучены.

 var inc = 0,1;
var scl = 100, zoff = 0;
VAR Cols, ряды, движение = 0;
частицы var = [];
var flowfield;
var img;
var maxspeed;
var t, calcx = 0, calcy = 0, currx = 0, curry = 0, targetx = 0, targety = 0; 

09. Установите все это

Функция установки, объявленная здесь, устанавливает, как экран будет смотреть на начало. Предполагается, что первое обнаружение состоит в том, чтобы увидеть, какая ширина экрана. Если это относительно большое, загружено большое изображение, создается холст, и это масштабируется через CSS, чтобы соответствовать на дисплее.

 Настройка функций () {
  Если (WindowWidth & GT; 1200) {
  img = loadimage ("активы / studio.png");
  var canvas = createcanvas (1920, 630);
  maxspeed = 10,5;
  } 

10. Другие экраны

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

 еще если (WindowWidth & GT; 900) {
  IMG = LoadImage («активы / студия-планшет-шириной». PNG);
  var canvas = createcanvas (1200, 394);
  SCL = 60;
  maxspeed = 7;
  } еще {
  IMG = LoadImage («Активы / Студия-Tablet-Tall.png»);
  var canvas = createcanvas (700, 230);
  SCL = 40;
  maxspeed = 5;
  } 

11. Сделайте сетку

После того, как размер экрана будет разработан, холст помещается в тег заголовка DIV на странице index.html. Ряд столбцов и строк разрабатываются на основе ширины и высоты; Это немного похоже на невидимую сетку. Наконец, массив устанавливается для поля потока.

 Canvas.Parent («заголовок»);
Cols = пол (ширина / SCL);
строки = пол (высота / SCL);
flowfield = новый массив (Cols); 

12. Сделайте частицы

Количество частиц устанавливается на основе ширины экрана - если экран имеет ширину 1920 пикселей, то будут созданы 2500 частиц, и он движется вниз оттуда. А для петли создает новые частицы. Цвет фона экрана установлен на почти полный белый.

 VAR NumParticles = Math.floor (((2500/1920) * ширина);
  для (var i = 0; i lt; numparticles; i ++) {
  частицы [I] = новая частица ();
  }
  фон (245);
} 

13. Нарисуйте экран

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

 Функция Draw () {
  NoStroke ();
  заполнить (245, 10);
  Прямо (0, 0, ширина, высота);
  nofill ();
  var yoff = 0; 

14. Создайте эффект потока

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

 для (var y = 0; y & lt; строки; y ++) {
  var xoff = 0;
  для (var x = 0; x & lt; cols; x ++) {
  PROR IDEX = (X + Y * COLS);
  Угол var = шум (xoff, leoff, zoff) * dvy_pi * 4;
  var v = p5.vector.fromangle (угол); 

15. Обновите массив

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

 v.setmag (1);
  flowfield [index] = v;
  xoff + = inc;
  }
  yoff + = inc;
  zoff + = 0,001;
  } 

16. Обновите частицы

Теперь частицы все зацикливаются в их массиве. Каждая отдельная частица сообщает, что следует следовать полю потока, чтобы обновить, проверяйте края экрана, немного рассеяны и, наконец, нарисовать на экране с помощью функции Show. Сохраните файл и проверьте «index.html», чтобы увидеть, как движутся частицы.

 для (var i = 0; I & lt; частицы. Длина; i ++) {
  частицы [I] .Follow (Flowfield);
  частицы [I] .Update ();
  частицы [I] .edges ();
  частицы [I] .SCatter ();
  частицы [I] .show ();
  }
} 

17. Добавьте текст

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

 изображение (IMG, 0, 0); 

18. Обнаружить положение мыши

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

 Targently = Math.rund (карта (Mousex, 0, ширина, -25, 25));
targetx = math.rund (карта (мышья, 0, высота, 25, -25)); 

19. Легкость на место

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

 var vx = (tarcex - currix) * 0,05;
var vy = (Targety - Curry) * 0,05;
CalcX + = VX;
CALTY + = VY; 

20. Напишите CSS

Переменная «T» здесь принимает расчетные значения и помещает их в строку CSS, используя значения преобразования ROTATEX и ROTATEY. Текущая позиция рассчитывается из позиции, в данный момент холст повернут.

 T = 'ROTATEX (' + CALTX + 'DEG) ROTATEY (' + CALTY + 'DEG)';
currx = calcx;
Curry = Calcy; 

21. Закончить

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

 canvas.style.webkittransform = t;
canvas.style.mstransform = t;
canvas.style.transform = t; 

Эта статья была первоначально опубликована в Creative Web Design Magazine Web Designer. Купить Выпуск 271. или же подписываться Отказ

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

• 70 лучших бесплатных шрифтов для дизайнеров
• 6 шагов к идеальному опыту чтения онлайн
• Бесплатный онлайн-инструмент показывает, что могут сделать ваши шрифты