Большим преимущиством Reveler от PowerPoint это Javascript и вся его мощь.
Если вы занете JS вы можете делать всё что угодно со своими слайдами, но если вы лентяй и знаете AlpineJS, то вам это будет сделать еще проще).
Поговорим сначала про чистый JavaScript. JavaScript пишется как и в обычном HTML в геге <script>, но со своими правилами и модификаторами
Но этот скрипт будет запускатся при каждом открытии слайда, но это поведение мы можем поменять. Если вы добавите атребут global в тег <script>, который скажет скрипту запускатся только перед отрытием презентации.
Если же мы хотим чтобы скрипт выполнятся при открытии слайда, но только один раз, то есть при первом открытии нам нужно добавить атребут ones
С помощью скриптов вы можете создавать динамические элементы и анимации. Например, вы можете создать анимированную загрузку, которая будет запускаться при переходе на слайд:
Создание динамических слайдов при помощи AlpineJS
Ванильный JS это конечно классно, но использовать UI библиотеки это намного лучше. В Reveler можно использовать AlpineJS, но с небольшими ограничениями (нельзя пока что использовать Alpine.data() , Alpine. store() , Alpine. bind()) и с небольшими изменениями синтаксиса. Чтобы использовать AlpineJS в место написания атребута x-data="" вы должны использовать тег <reactive> и писать всю логику в нем.
С помощью AlpineJS вы можете создавать интерактивные слайды, которые реагируют на действия пользователя. Например, вы можете создать слайд, который будет изменять свое содержимое в зависимости от ответа пользователя:
Использование глобальной переменной Reveler
Глобальный объект Reveler имеет несколько свойств, которые позволяют управлять презентацией. В данный момент объект содержит функции для перехода на следующий и предыдущий слайд, а также функции для перехода на слайд слева и справа. Для использования этих функций необходимо написать скрипт внутри тега на слайде, который вы хотите управлять.
Например, в следующем примере мы используем функции для перехода на следующий слайд:
Так же можно задать переход на другой через определённое время при помощи функции moveToTime()
Также в глобальном объекте Reveler есть модуль анимации GSAP, который вы можете использовать для создания анимаций в слайдах. Для использования модуля необходимо импортировать его в свой скрипт.
В данном примере мы импортируем модуль GSAP из объекта Reveler и используем его для анимации элемента в слайде. Вы можете использовать модуль для создания различных анимаций, например, анимации появления или изменения размера элемента.
Кроме того, в глобальном объекте Reveler есть свойства, которые позволяют получать информацию о текущем слайде. Например, функция getRow() возвращает номер строки, в которой находится текущий слайд, а функция getSlide() возвращает номер слайда в этой строке.
В данном примере мы используем функции getRow() и getSlide() для получения информации о текущем слайде и выводим ее в консоль.
В будущем в объект Reveler будут добавлены другие функции, которые вы сможете использовать. Например, функция для перемещения на слайд через определенный промежуток времени, функции для получения информации о текущем слайде и многое другое.
Таким образом, глобальный объект Reveler предоставляет удобный способ управления презентацией и создания анимаций. Его функции и свойства можно использовать для создания более интерактивных и увлекательных презентаций.