Skip to content

Instantly share code, notes, and snippets.

@matheus-souza

matheus-souza/reveal-index-example.html

Created April 7, 2017 00:48
Show Gist options
  • Save matheus-souza/80de39d876beaa71543e41b1a1c7940b to your computer and use it in GitHub Desktop.
Save matheus-souza/80de39d876beaa71543e41b1a1c7940b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
reveal-index-example.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
<section>
<section>Slide vertical 1</section>
<section>Slide vertical 2</section>
<section>Slide vertical 3</section>
</section>
<!-- fundos com cores -->
<section data-background="#ff0000"></section>
<!-- fundos com imagens -->
<section data-background="image.png"></section>
<!-- fundos com imagens em tamanho definido e se repetindo -->
<section data-background="image.png" data-background-size="100px" data-background-repeat="repeat"></section>
<!-- vídeos em loop! -->
<section data-background-video="video" data-background-video-loop></section>
<!-- um site dentro do próprio slide! -->
<section data-background-iframe="https://willianjusten.com.br"></section>
<!-- Essa transição irá ser passada como um zoom. -->
<section data-transition="zoom">Zoom</section>
<!-- Escolha a velocidade do slide entre: default, fast or slow! -->
<section data-transition-speed="fast">Fast</section>
<!-- Transição padrão de deslizar para o lado. -->
<section data-transition="slide">Slide</section>
<!-- Desliza quando entra (slide-in) e esmaece quando sai. (fade-out) -->
<section data-transition="slide-in fade-out">Esmaece quando sai</section>
<!-- Esmaece quando entra (fade-in) e desliza quando sai. (slide-out) -->
<section data-transition="fade-in slide-out">Desliza quando sai</section>
<section>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment fade-up">fade-up (also down, left and right!)</p>
<p class="fragment current-visible">visible only once</p>
<p class="fragment highlight-current-blue">blue only once</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>
</section>
<section>
<span class="fragment fade-in">
<span class="fragment fade-out">I'll fade in, then out</span>
</span>
</section>
<section>
<span class="fragment fade-in">I'll fade in, then out[...]</span>
<span class="fragment fade-in">[...]I'll fade in, then out[...]</span>
<span class="fragment fade-in">[...]I'll fade in, then out[...]</span>
</section>
<section>
<p class="fragment" data-fragment-index="3">Appears last</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>
</section>
<section>
<pre><code data-trim data-noescape>
(def lazy-fib
(concat
[0 1]
<mark>((fn rfib [a b]</mark>
(lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
</code></pre>
</section>
<section>
<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</section>
<section>
<h2>This video will use up the remaining space on the slide</h2>
<video class="stretch" src="https://www.youtube.com/watch?v=-9_zcFmvbMA"></video>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
/*exibe numero na pagina
Reveal.configure({ slideNumber: true });
exibe numero na pagina com total
Reveal.configure({ slideNumber: 'c/t' }); */
/*para exportar para pdf precisa configurar o tamanho padrão do slide
Reveal.initialize({
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 960,
height: 700,
// Factor of the display size that should remain empty around the content
margin: 0.1,
// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.5
});
ou
Reveal.initialize({
width: "100%",
height: "100%",
margin: 0,
minScale: 1,
maxScale: 1
});*/
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment