Hype от Tumult - отличный инструмент для некодеров, позволяющий создавать впечатляющие веб-сайты, особенно если вы ищете что-то довольно динамичное. Для людей, знакомых с AfterEffects или Sketch, его интерфейс очень похож. Hype даже позволяет вам добавлять свои собственные функции javascript, что означает, что вы даже можете создать динамический веб-сайт, подобный CMS, без необходимости знать какой-либо код.
В этом руководстве мы собираемся использовать Hype для динамического обновления содержимого веб-сайта, заполняя наш сайт последними ставками по ипотечным кредитам из файла данных.
Во-первых, Hype и Javascript должны знать, какие данные / контент вы пытаетесь изменить. В этом случае мы изменим ипотечную ставку, которая в нашем проекте является текстовым блоком. Поэтому нам нужно дать ему собственный класс. Выделите текст и присвойте ему уникальный класс в Identity Inspector. Я называю свою ставку - текущую.
Затем нам нужно добавить файл javascript, который будет содержать все данные, которые мы хотим изменить. Просто создайте простой файл в любом текстовом редакторе и назовите его data.js. В этом файле вы будете хранить все свои данные. В этом примере я сделаю это очень простым и сохраню только один объект в моем файле данных, текущую ставку по ипотеке:
data = {currentRate: '4.5%'}
Теперь нам нужно добавить этот файл в наш проект Hype. Перейти к View > Resource Library. Нажмите кнопку +, выберите Add File… и выберите файл data.js.
Далее мы хотим создать функцию, которая фактически изменяет текст. Снова в библиотеке ресурсов нажмите + и выберите Add Javascript Function. Вы попадете в новое окно кода, подобное этому:
Там, где написано untitledFunction, просто напишите что-нибудь более информативное, без пробелов, например: onSceneLoaded. Поскольку у меня будет больше одной сцены, я назвал свою onRatesSceneLoaded. Сохрани это.
Перейдите к Scene Inspector, и прокрутите вниз до On Scene Load. Для Action выберите Run Javascript, а в Function выберите имя только что созданной функции (onRateSceneLoaded для меня).
Вернитесь к той функции javascript, которую вы создали (в окне Resource Library выделите onRatesSceneLoaded и нажмите кнопку Edit Source… внизу.
В этой функции мы хотим сообщить Hype, какой контент мы хотим загрузить и где. В этом примере мы сохраним простоту и просто изменим одну вещь - процентную ставку.
const currentRate = document.querySelector('.rate--current');currentRate.innerHTML = data.currentRate;
Здесь я объявляю переменную (const) с именем currentRate, которая находит (querySelector) текст, содержащий ставку по ипотеке на нашем веб-сайте (document), путем выбора класса, который мы присвоили в Инспекторе идентичности (.rate--current).
Затем я устанавливаю для содержимого этого текстового блока значение currentRate, указанное в моем файле данных.
Примечание. Если вы не хотите иметь дело с файлом данных, вы можете просто пропустить эту часть и просто установить в innerHTML любой желаемый текст, например:
currentRate.innerHTML = "4.5%"
Итак, с динамическими данными вся ваша функция выглядит так:
Подводя итог, мы сделали следующее:
- Скажите Hype загрузить файл javascript. Переменная данных становится доступной для Hype, потому что внутри этого файла javascript у нас есть объект javascript с именем
data: (data = {}). - Учитывая текстовое поле, уникальную переменную, которую Hype может использовать, чтобы найти ее во всем остальном HTML и вставить контент.
- Указана функция javascript, которая вызывается при загрузке нашей сцены.
- Сказал, что функция найдет текстовое поле и вставит HTML из нашего файла данных.
Если бы мы хотели сделать еще один шаг, эта функция javascript могла бы заполнить больше текстовых полей, сделать запрос AJAX к API, запустить анимацию javascript из другой библиотеки, что бы вы ни хотели.
Удачи во всем, что вы создаете с Hype, и дайте мне знать, если у вас возникнут вопросы.
