Большим преимущиством Reveler от PowerPoint это Javascript и вся его мощь. Если вы занете JS вы можете делать всё что угодно со своими слайдами, но если вы лентяй и знаете AlpineJS, то вам это будет сделать еще проще).
Поговорим сначала про чистый JavaScript. JavaScript пишется как и в обычном HTML в геге <script>, но со своими пр…
Для начала написания презентации на Reveler нам просто нужно создать файл с расширением *. vptx или *. html. Если вы их создали, то у вас уже есть ваша первая презентация, но она не откроется😅. Для того чтобы она открылась вам нужно написать структуру презентации, давайте её напишем.
<presentation>
<!-- Тут будет ваша презентация -->
</presentation>
2
\n
При открытии слайда в консоль выведится \"Hello world\"
Но этот скрипт будет запускатся при каждом открытии слайда, но это поведение мы можем поменять. Если вы добавите атребут global в тег <script>, который скажет скрипту запускатся только перед отрытием презентации.
С помощью скриптов вы можете создавать динамические элементы и анимации. Например, вы можете создать анимированную загрузку, которая будет запускаться при переходе на слайд:
\n","lang":""}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Создание динамических слайдов при помощи AlpineJS"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Ванильный JS это конечно классно, но использовать UI библиотеки это намного лучше. В Reveler можно использовать AlpineJS, но с небольшими ограничениями (нельзя пока что использовать Alpine.data() , Alpine. store() , Alpine. bind()) и с небольшими изменениями синтаксиса. Чтобы использовать AlpineJS в место написания атребута x-data=\"\" вы должны использовать тег <reactive> и писать всю логику в нем.
С помощью AlpineJS вы можете создавать интерактивные слайды, которые реагируют на действия пользователя. Например, вы можете создать слайд, который будет изменять свое содержимое в зависимости от ответа пользователя:
Глобальный объект Reveler имеет несколько свойств, которые позволяют управлять презентацией. В данный момент объект содержит функции для перехода на следующий и предыдущий слайд, а также функции для перехода на слайд слева и справа. Для использования этих функций необходимо написать скрипт внутри тега на слайде, который вы хотите управлять.
Также в глобальном объекте Reveler есть модуль анимации GSAP, который вы можете использовать для создания анимаций в слайдах. Для использования модуля необходимо импортировать его в свой скрипт.
В данном примере мы импортируем модуль GSAP из объекта Reveler и используем его для анимации элемента в слайде. Вы можете использовать модуль для создания различных анимаций, например, анимации появления или изменения размера элемента.
Кроме того, в глобальном объекте Reveler есть свойства, которые позволяют получать информацию о текущем слайде. Например, функция getRow() возвращает номер строки, в которой находится текущий слайд, а функция getSlide() возвращает номер слайда в этой строке.
В будущем в объект Reveler будут добавлены другие функции, которые вы сможете использовать. Например, функция для перемещения на слайд через определенный промежуток времени, функции для получения информации о текущем слайде и многое другое.
Таким образом, глобальный объект Reveler предоставляет удобный способ управления презентацией и создания анимаций. Его функции и свойства можно использовать для создания более интерактивных и увлекательных презентаций.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":0,"reposts":0,"views":55,"hits":42,"reads":null,"online":0},"dateFavorite":0,"hitsCount":42,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id856347/632016-2dinamika-slaidov-v-reveler","author":{"id":856347,"name":"VIOOI","nickname":null,"description":"Я занимаюсь проектом Reveler о котором вы можете почитать здесь у меня и если есть какие нибудь предложения, пишите в тг @Vl00l","uri":"","avatar":{"type":"image","data":{"uuid":"edfea385-7ae5-5b75-bd0f-0c48474b9cfd","width":1500,"height":1500,"size":91703,"type":"jpg","color":"1b1b1b","hash":"174d4d330000","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4582646,"userId":856347,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4582646"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":958559,"userId":856347,"count":0,"shareImage":"https://api.vc.ru/achievements/share/958559"}],"lastModificationDate":1764977119,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":856347,"name":"VIOOI","nickname":null,"description":"Я занимаюсь проектом Reveler о котором вы можете почитать здесь у меня и если есть какие нибудь предложения, пишите в тг @Vl00l","uri":"","avatar":{"type":"image","data":{"uuid":"edfea385-7ae5-5b75-bd0f-0c48474b9cfd","width":1500,"height":1500,"size":91703,"type":"jpg","color":"1b1b1b","hash":"174d4d330000","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4582646,"userId":856347,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4582646"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":958559,"userId":856347,"count":0,"shareImage":"https://api.vc.ru/achievements/share/958559"}],"lastModificationDate":1764977119,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":628089,"customUri":null,"subsiteId":856347,"title":"1::Первая презентация на Reveler","date":1678217679,"dateModified":1678217679,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"
Для начала написания презентации на Reveler нам просто нужно создать файл с расширением *. vptx или *. html. Если вы их создали, то у вас уже есть ваша первая презентация, но она не откроется😅. Для того чтобы она открылась вам нужно написать структуру презентации, давайте её напишем.
\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit ex corporis \n ut mollitia labore voluptatibus, vero aut quo molestias nemo eaque error atque \n reiciendis reprehenderit dolores dolor porro eum nobis!\n
Это создаст самый простой слайд у которого есть сверху заголовок и текстом текстом по центру, ничего интересного. Но все слайды делаются точно также. Внутри тега <slide> пишется разметка слайда и вы можете сделать грид слайда совершенно любой, какой вам захочется
Тег <slide> это обёртка для вашего слайда и его тоже можно стилизовать. У него по стандарту очень темный фон, но добавив ему класс который меняет цвет фона вы поменяете цвет фона у всего слайда или можете добавив ему отступы. У слайда есть некоторые стандартные классы UnoCSS который дают ему некоторые стили: class=«relative box-border w-screen h-screen flex-center p-0». Добавляя свои стили вы затираете стандартные, если они конфликтуют.
Создав ещё один слайд у вас появится возможность перелистывать слайды. Это можно сделать несколькими способами:
"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["←H ↓J ↑K →L — те кому знаком vim я думаю понравится такая навигация","Обычные стрелочки на клавиатуре","Если в теге <presentation> вы напишете атребут control=«true», на экране (снизу справа) появится панель навигации со стрелачками навигации и при нажатии на них вы можете переключатся между слайдами"],"type":"UL"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Группы слайдов"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Но мы пока что можем перемещатся только вверх и вниз, ведь у нас только одинарные слайды и нет ни одной группы слайдов. Так давайте её добавим.
И теперь с такой структурой переключившись на второй слайд (вниз) мы сможем передвинутся вправо, чтобы посмотреть следующий слайд во второй строке. Ничего сложного
Но есть дополнительные фишечки для стилизации вашей презентации. Например если у вас все слайды должны быть не стандартного цвета вы можете настроить всю презентацию. Просто добавте атребут background со значением вашего фонового цвета и все слайды окрасятся в этот цвет. Так же можно сделать и с цветом текста. Эти атребуты работают так же как и у тега <slide>, но цвета применятся ко всем слайдам, если конечно вы их не перепишете в самом слайде.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":1,"reposts":0,"views":322,"hits":90,"reads":null,"online":0},"dateFavorite":0,"hitsCount":90,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id856347/628089-1pervaya-prezentaciya-na-reveler","author":{"id":856347,"name":"VIOOI","nickname":null,"description":"Я занимаюсь проектом Reveler о котором вы можете почитать здесь у меня и если есть какие нибудь предложения, пишите в тг @Vl00l","uri":"","avatar":{"type":"image","data":{"uuid":"edfea385-7ae5-5b75-bd0f-0c48474b9cfd","width":1500,"height":1500,"size":91703,"type":"jpg","color":"1b1b1b","hash":"174d4d330000","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4582646,"userId":856347,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4582646"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":958559,"userId":856347,"count":0,"shareImage":"https://api.vc.ru/achievements/share/958559"}],"lastModificationDate":1764977119,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":856347,"name":"VIOOI","nickname":null,"description":"Я занимаюсь проектом Reveler о котором вы можете почитать здесь у меня и если есть какие нибудь предложения, пишите в тг @Vl00l","uri":"","avatar":{"type":"image","data":{"uuid":"edfea385-7ae5-5b75-bd0f-0c48474b9cfd","width":1500,"height":1500,"size":91703,"type":"jpg","color":"1b1b1b","hash":"174d4d330000","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4582646,"userId":856347,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4582646"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":958559,"userId":856347,"count":0,"shareImage":"https://api.vc.ru/achievements/share/958559"}],"lastModificationDate":1764977119,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":2}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"cursor":"PuR2GsZKFTvhhGxTDY7q4drVS6IzQAa09I6wtbz/zlbeaPDONLWpz09a5WxDnG4=","isAnonymized":true}};