Skip to content

Instantly share code, notes, and snippets.

@andrewn

andrewn/fading-background.html

Created July 3, 2013 10:19
Show Gist options
  • Save andrewn/5916881 to your computer and use it in GitHub Desktop.
Save andrewn/5916881 to your computer and use it in GitHub Desktop.
Download ZIP
Fading backgrounds in reveal.js
Raw
fading-background.html
<div class="slides">
<section data-background="assets/image1.png">
<h2></h2>
</section>
<section data-background="assets/image2.png">
<h2></h2>
</section>
<section data-background="assets/image1.png">
<h2></h2>
</section>
</div>
Raw
gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Slide Backgrounds</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../css/reveal.min.css">
<link rel="stylesheet" href="../css/theme/serif.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="assets/image1.png">
<h2></h2>
</section>
<section data-background="assets/image2.png">
<h2></h2>
</section>
<section data-background="assets/image1.png">
<h2></h2>
</section>
</div>
</div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
center: true,
// rtl: true,
transition: 'linear',
// transitionSpeed: 'slow',
// backgroundTransition: 'linear'
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment