62 / 68
CODE/
REVEAL
62
<a href="?theme=simple#/
themes">Simples</a>
<a href="?theme=serif#/
themes">Serifado</a>
<a href="?theme=night#/
themes">Noite</a>
<a href="?#/themes">Padrão</
a>
</p>
</section>
E no código de inicialização:
<script>
// Obrigatório.
Reveal.initialize({
theme: Reveal.
getQueryHash().theme,
});
</script>
SLIDES DENTRO
DE SLIDES
Um slide pode conter outros,
de forma que é possível navegar
por eles verticalmente, em vez de
horizontalmente. O seguinte código
será acrescentado ao slide 3, para
permitir essa navegação vertical.
<section>
<section>
<h2>Slides Verticais</h2>
<p>Slides podem ser includos
dentro de outros slides. Use
as setas para cima e para
baixo para navegar</p>
<a href="#" class="navigate-
down">
<img width="300"
src=
"http://www.locaweb.
com.br/images/lw2013/logo-
lw160x36.20140924124623.png"
alt="Locaweb"></a>
</section>
<section>
<h2>Nível 1</h2>
<p>Pressione seta para baixo
ou para cima para navegar.</
p>
</section>
<section>
<h2>Nível 2</h2>
<p>Revista Locaweb</p>
[
A FERRAMENTA PERMITE CRIAR COMHTML5, CSS E JAVASCRIPT
]
<a class="test"
href=
"http://www.locaweb.
com.br/sobre-locaweb/
revista.html">
<img width="280"
src=
"http://www.locaweb.
com.br/images/layout/
revista/capas/revista45.jpg"
alt="Revista Locaweb"></a>
</section>
<section>
<h2>Nível 3</h2>
<p>Voltar para o nível 2.</
p>
<a href="#/2">
<img width="280"
src=
"http://www.locaweb.com.br/images/layout/revista/
capas/revista43.jpg" alt="Up
arrow"></a>
</section>
</section>
EXIBIÇÃO GRADUAL
DE LINHAS DE TEXTO
Um dos recursos mais usados
no PowerPoint é a exibição
gradual de linhas de texto em um
slide. Como uma lista de itens ou
elementos de uma frase a serem
analisados passo a passo. Esse
recurso também está disponível no
Reveal.js. Para isso, será criada uma
nova seção, com o seguinte código
de exibição gradual.
<section>
<section id="fragments">
<h2>Exibição gradual</h2>
<p>Clique na seta para a
direita...</p>
<p class="fragment">... para
avançar ...</p>
<ol>
<li
class="fragment"><code>uma
linha</code></li>
<li class="fragment"><em>de
cada
vez</em></li>
<li
class="fragment">
<strong>neste
slide</strong></li>
<li
class="fragment">
<strong>Clique
na seta para baixo para
ver os
estilos</strong></li>
</ol>
<aside class="notes">
Este slide tem linhas que
são exibidas passo a passo
na tela.
</aside>
</section>
<section>
<h2>Estilos para exibição
gradual</h2>
<p>Alguns estilos de
transição, como:</p>
<p class="fragment
grow">grow</p>
<p class="fragment
shrink">shrink</p>
<p class="fragment roll-
in">roll-in</p>
<p class="fragment fade-
out">fade-out</p>
<p class="fragment
highlight-red">highlight-
red</p>
<p class="fragment
highlight-green">highlight-
green</p>
<p class="fragment
highlight-blue">highlight-
blue</p>
<p class="fragment current-
visible">current-visible</p>
<p class="fragment
highlight-current-
blue">highlight-current-
blue</p>
</section>
</section>
Para controlar a ordem de
exibição de cada elemento, é
possível usar o atributo data-
REVISTA LOCAWEB