Интерактивный заголовок с Blotter.js

здрасте сегодня я расскажу как сделать воротам текст с помощью библиотеки blood rds и добавить ними драки с помощью мыши кстати после просмотра этого видео вы поймете как настраивается подключается большинство java script библиотек интерактив у нас сегодня следующий обычный текст но стоит только навести мышку сразу начинаем красотища как это сделано потрясающе библиотек вот роджерс позволяет делать такие текстовые эффекты наконец-то вы сможете поиграться со всеми шрифтами на сайте также представлена документация значит пишите вот такой вот java script ешьте молю вас вот такой вот и получается у нас вот так вот а значит есть еще плагины дополнительные которые называются материалы которые используют шейдеры и значит тут вы добавили эти плагины написали такой вот java script и html вас не изменился получилось у вас вот так вот это эта магия материалы представлены следующие есть тянул сплит на каждой странице материала можно посмотреть как он будет себя вести и уже подумать какого-нибудь следующем интерактиве к чему все это можно прикрепить к движением мыши олег повороту вашего телефона посмотрите поиграйтесь мы с вами посмотрим сегодня рекорд distort ну начнем сделаю новую папку в уголочке чтобы никому не мешает стену на новую папку свое эксперимент я просто перетащу ps код я делаю новый файл называемого и мкс аж тимой и открою мой файл с шим сервером не забудем один так у меня будет синий фон его не будет отступов его будет высота скал процентов высоты и порта и все что будет находиться в нем будет находиться по центру дисплей grid place поэтому центр самый короткий способ выровнять все внутри одного контейнера по центру следующим действием нам нужно подключить скрипты скриптов будет несколько те взять скрипты вы можете скачать отсюда скачать себе на компьютер подключить его закрылась ссылка этих обе его можно скопировать можно скачать если вы нажмете кнопку роу веганский потом нажмите команд с вас скачается java script file дальше можно перенести нужны бабки на например сего теперь его нужно подключить и если этот файл необходим для работы приложения а в нашем случае он необходим потом. мин. я включаю вот такая так и подключаются все файлы которые необходимы для работы вашего сайта они загрузятся сначала до работы сайта мой скрипт который запустить код инициализацию всех плагинов он будет находиться в конце боя мой файл г. с. свою файла ps я добавляю в конце и разыгрывающим итогам боя он отработает последнюю очередь выглядя по подключили еще нам нужен контейнер в котором будет находиться все наши великолепное действие и еще мне провалиться один тип с классом например об и так переходим в java script у но если посмотреть например как с этим всем работать а я ничего не понимающим расцвет скопирует давайте посмотрим что здесь происходит инициализация vortex не убор текст какой я пишу все что угодно броска имя любимой девушке парня или недругах другом мы инициализируем эту библиотеку new blood red ex передаем сюда название текст то что будет нашим тексты мы передаем сюда текст который мы хотим чтобы нарисовался через запятую список параметров family time размер 80 fill light дальше материал сейчас без материала blood r равняется детализируем включаем даже если не понимаете главное попробовать попробуйте с временем разобраться пикет tell you may get в конце концов документ вере селектор нас был в его доме нас получается такая такой креатив какой бриф такой и креатив но с этим зале заметьте что и так он у

вас и так а нос это не текста не выделяйся ты так анонс а картинка и можете сохранить но самой интересной истории начинается с включением материалов которые доступны этой странице посмотрим на примере liquidy в торта но важно что перед тем как их подключить их нужно тоже скачать как их скачать их нужно найти где-нибудь охвату где спрятались ты гениален а ссылкой материала доступна на кнопки source code которые зачем-то скрыли в мобильные версии оно находится прямо под моим окном кнопка source code если не везет есть прекрасный сайт который позволяет искать библиотеки и включать их используя ссылку могу заменить плоттер мем могу заменить ссылкой мне уже не нужно его скачивать меня будет просто ссылка храню и отсюда эту штуку я говорю то же самое теперь сделаю с материалом матерный находится shader который будет менять наш текст заметишь то есть два файла есть. джесса и стрижками же. mendez это уменьшенная версия не убраны все пробелы поэтому используйте эти версии и я вставлю политику с материал я могу использовать новый материал как его использовать вместо new blood of material я использую теперь new blood прикид distort материала заметьте что теперь он обрезается как это убрать можно добавить по денги padding life pour te me right padding топ и пойдем потом можно менять значения которые доступны и в описание материала у нас есть you spit you volatility on you sit висит обычная сито то зерно это случайный фактор меняя его у нас просто генерируется что то что совершенно другое погнали мажем трем ниже поменять настройки этого материала материал uniforms you spit равняется например но ради замедлим и все сломалось не спи. валью довольством медленнее двигаться и как добавить добыть интерактив можно добавить слушатель события но us move функции мы продаем event я называю его сокращенно и материал и не forms you volatility цели и идти. валью равняется события клиент x что то конечно ничего хорошего не происходит значит число очень большое если число очень большое умножаете его на дробь все равно много пробуйте разные диапазоны вот уже что-то поинтереснее новым можно увеличить красота кстати знаете что у моего любимого над лифа и появилась новая функция на для fly drop trap и сюда его курс кинуть папку даже авторизоваться не нужно бумс все готово мой эксперимент