Tempo de leitura: menos de 1 minuto

Construir apresentações não é fácil. Muitas vezes, você fica preso no Prezi ou no PowerPoint e os modelos são extremamente limitados e genéricos.

Hoje, vamos aprender como criar uma apresentação impressionante e animada usando HTML, CSS e JavaScript.

Se você é iniciante em desenvolvimento web, não se preocupe! Este tutorial será fácil o suficiente para acompanhar. Então, vamos deslizar direto para ele!

Usaremos uma estrutura incrível chamada Reveal.js . Ele fornece funcionalidade robusta para criar apresentações interessantes e personalizáveis.

Vamos começar!

Vá para o repositório Reveal.js e clone o projeto (você também pode colocar isso no seu espaço para nome do GitHub).

Altere os diretórios para sua pasta clonada recentemente e execute o npm install para baixar as dependências do pacote. Em seguida, execute npm startpara executar o projeto.

O index.htmlarquivo contém toda a marcação para os slides. Essa é uma das desvantagens do uso do Reveal.js; todo o conteúdo será colocado dentro deste arquivo HTML.

Mudando o tema

Abrir index.html
Altere a importação de CSS para refletir o tema que você deseja usar

Temas incorporados

O Reveal.js inclui 11 temas internos para você escolher:

Os arquivos de tema são:

beige.css
black.css
blood.css
league.css
moon.css
night.css
serif.css
simple.css
sky.css
solarized.css
white.css

Criando um tema personalizado

Abra css/theme/srcdentro do seu IDE. Isso contém todos os arquivos Sass ( .scss) para cada tema. Esses arquivos serão transpilados para CSS usando o Grunt (um executor de tarefas JavaScript). Se você preferir escrever CSS, vá em frente e crie o arquivo CSS dentro de css / theme.
Crie um novo .scssarquivo. Vou ligar para o meu custom.scss. Você pode ter que parar seu host local e executar npm run buildpara transpilar seu código Sass para CSS.
Dentro do index.htmlarquivo, altere a importação do tema CSS na <head>tag para usar o nome da folha de estilo recém-criada. A extensão será .css, não .scss.
Em seguida, criei variáveis para todos os estilos diferentes que desejava usar. Você pode encontrar fontes personalizadas no Google Fonts. Depois que a fonte for baixada, adicione os URLs da fonte no index.htmlarquivo.

Mixins e configurações

O Reveal.js também vem com mixins e configurações que você pode aproveitar no seu tema personalizado.

Para usar os mixins e as configurações, basta importar os arquivos para o seu tema personalizado:

Mixins
Você pode usar as mixins de gradiente vertical, gradiente horizontal ou gradiente radial para criar um efeito visual elegante.

Tudo o que você precisa fazer é passar os parâmetros necessários (valor da cor) e pronto, você tem um gradiente!

Configurações
No arquivo de configurações, você encontrará variáveis úteis como tamanhos de cabeçalho, fontes e cores padrão e muito mais!

Elementos

A estrutura para adicionar novo conteúdo é:

.reveal > .slides > section

O <section>elemento representa um slide. Adicione quantas seções você precisar para o seu conteúdo.

Slides verticais

Para criar slides verticais, basta aninhar seções.

Transições

Existem várias transições de slides diferentes para você escolher:

Nenhum
Desvaneça
Deslizar
Convexo
Côncavo
Ampliação

Para usá-los, adicione um data-transition="{name}"ao <section>que contém os dados do slide.

Fragmentos

Fragmentos são ótimos para destacar informações específicas no seu slide. Aqui está um exemplo.

Para usar fragmentos, adicione a class="fragment {type-of-fragment}"ao seu elemento.

Os tipos de fragmentos podem ser:

crescer
encolher
desaparecer
desbotar
desaparecer depois
desvanecer-se-depois-semi-fora
destaque atual-azul
realçar-vermelho
destaque-verde
destaque-azul

Além disso, você pode adicionar índices aos seus elementos para indicar em qual ordem eles devem ser destacados ou exibidos. Você pode denotar isso usando o data-fragment-index={index}atributo

Há muito mais recursos para o Reveal.js que você pode aproveitar para criar uma excelente apresentação, mas essas são as principais coisas que me ajudaram a começar.

Segue minha apresentação utilizando o Reveal.js

https://github.com/jefferson-pereira-oliveira/meetup-hal9000

Até a próxima!