Reveal JS

reveal.js - Framework de Apresentações em HTML

Sobre

O reveal.js é um framework open source para criação de apresentações interativas diretamente no navegador, utilizando HTML, CSS e JavaScript. Foi criado por Hakim El Hattab e conta com contribuições de uma comunidade ativa. Por ser baseado em tecnologias web abertas, qualquer recurso disponível na web pode ser incorporado a uma apresentação.

• Site oficial: https://revealjs.com/
• Repositório: https://github.com/hakimel/reveal.js
• Editor visual online: https://slides.com

---

Funcionalidades Principais

Estrutura de Slides

• Slides organizados de forma horizontal (fluxo principal) e vertical (slides aninhados/nested)
• Navegação por teclado, toque (swipe) e mouse
• Suporte a slides ocultos com controle de visibilidade

Conteúdo Suportado

• HTML e Markdown para autoria de conteúdo
• Realce de sintaxe de código via highlight.js
• Matemática/LaTeX com suporte nativo
• Tabelas, listas ordenadas e não ordenadas
• Iframes para incorporar páginas externas
• Mídia: imagens, vídeos (mp4/webm), GIFs e fundos com parallax

Animações e Transições

• Auto-Animate: animação automática entre elementos correspondentes em slides consecutivos
• Fragmentos: revelação progressiva de elementos dentro de um slide
  • Estilos disponíveis: grow, shrink, fade-out, fade-right/up/down/left, highlight-red/blue/green, entre outros
• Transições de slide: none, fade, slide, convex, concave, zoom
• Transições de fundo: configuráveis globalmente ou por slide

Fundos Personalizados

<!-- Cor sólida -->
<section data-background="#dddddd">
 
<!-- Imagem -->
<section data-background="image.png">
 
<!-- Imagem repetida (tile) -->
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
 
<!-- Vídeo -->
<section data-background-video="video.mp4,video.webm">
 
<!-- Transição de fundo por slide -->
<section data-background-transition="zoom">

Recursos Avançados

• Modo Apresentador (Speaker View): exibe timer, prévia do próximo slide e notas do apresentador. Ativar com a tecla S
• Visão geral dos slides: acessível via tecla ESC
• Auto-Slide (Auto-progression): avanço automático de slides
• Exportação para PDF: apresentações podem ser exportadas diretamente
• Modo tela cheia e Scroll View (novo)
• Numeração de slides e Jump to Slide
• Suporte RTL (direita para esquerda)
• Zoom em elementos: Alt + clique (ou Ctrl + clique no Linux)
• Pausa da apresentação: tecla B ou .

---

Personalização

Temas

O reveal.js inclui temas prontos e permite a criação de temas customizados via CSS.

• Documentação: https://revealjs.com/themes/

Configuração

Reveal.configure({ backgroundTransition: 'zoom' });

• Lista completa de opções: https://revealjs.com/config/
• Tamanho da apresentação: https://revealjs.com/presentation-size/

Estado Global dos Slides

<section data-state="meu-estado">

Reveal.on('customevent', function() {
  console.log('"customevent" disparado');
});

---

API e Extensibilidade

• API JavaScript completa: https://revealjs.com/api/
• Eventos: https://revealjs.com/events/
• Atalhos de teclado personalizados: https://revealjs.com/keyboard/
• Estado da apresentação: https://revealjs.com/presentation-state/
• postMessage: https://revealjs.com/postmessage/

Plugins

• Utilização de plugins: https://revealjs.com/plugins/
• Plugins embutidos: https://revealjs.com/plugins/#built-in-plugins
• Criação de plugins: https://revealjs.com/creating-plugins/
• Multiplex (apresentações sincronizadas): https://revealjs.com/multiplex/
• Plugins de terceiros: https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware

Integração com React

• Documentação: https://revealjs.com/react/

---

Instalação e Início Rápido

• Instruções de instalação: https://revealjs.com/installation/
• Curso em vídeo oficial: https://revealjs.com/course
• Instruções de upgrade: https://revealjs.com/upgrading/
• Changelog: https://github.com/hakimel/reveal.js/releases

---

Editor Visual Online - Slides.com

Para quem não deseja escrever HTML ou Markdown diretamente, o Slides.com oferece um editor visual completo baseado no reveal.js, criado pelo mesmo autor. Possui plano gratuito e planos pagos.

---

Referências

• Site oficial: https://revealjs.com/
• Repositório GitHub: https://github.com/hakimel/reveal.js
• Editor online Slides.com: https://slides.com
• Autor: @hakimel
• highlight.js (realce de código): https://highlightjs.org/
• Contribuidores: https://github.com/hakimel/reveal.js/graphs/contributors