docs/com/test/examples/slide-backgrounds.html

   1 <!doctype html>
   2 <html lang="en">
   3
   4         <head>
   5                 <meta charset="utf-8">
   6
   7                 <title>reveal.js - Slide Backgrounds</title>
   8
   9                 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  10
  11                 <link rel="stylesheet" href="../../css/reveal.css">
  12                 <link rel="stylesheet" href="../../css/theme/serif.css" id="theme">
  13                 <style type="text/css" media="screen">
  14                         .slides section.has-dark-background,
  15                         .slides section.has-dark-background h2 {
  16                                 color: #fff;
  17                         }
  18                         .slides section.has-light-background,
  19                         .slides section.has-light-background h2 {
  20                                 color: #222;
  21                         }
  22                 </style>
  23         </head>
  24
  25         <body>
  26
  27                 <div class="reveal">
  28
  29                         <div class="slides">
  30
  31                                 <section data-background="#00ffff">
  32                                         <h2>data-background: #00ffff</h2>
  33                                 </section>
  34
  35                                 <section data-background="#bb00bb">
  36                                         <h2>data-background: #bb00bb</h2>
  37                                 </section>
  38
  39                                 <section data-background-color="lightblue">
  40                                         <h2>data-background: lightblue</h2>
  41                                 </section>
  42
  43                                 <section>
  44                                         <section data-background="#ff0000">
  45                                                 <h2>data-background: #ff0000</h2>
  46                                         </section>
  47                                         <section data-background="rgba(0, 0, 0, 0.2)">
  48                                                 <h2>data-background: rgba(0, 0, 0, 0.2)</h2>
  49                                         </section>
  50                                         <section data-background="salmon">
  51                                                 <h2>data-background: salmon</h2>
  52                                         </section>
  53                                 </section>
  54
  55                                 <section data-background="rgba(0, 100, 100, 0.2)">
  56                                         <section>
  57                                                 <h2>Background applied to stack</h2>
  58                                         </section>
  59                                         <section>
  60                                                 <h2>Background applied to stack</h2>
  61                                         </section>
  62                                         <section data-background="rgb(66, 66, 66)">
  63                                                 <h2>Background applied to slide inside of stack</h2>
  64                                         </section>
  65                                 </section>
  66
  67                                 <section data-background-transition="slide" data-background="assets/image1.png">
  68                                         <h2>Background image</h2>
  69                                 </section>
  70
  71                                 <section>
  72                                         <section data-background-transition="slide" data-background="assets/image1.png">
  73                                                 <h2>Background image</h2>
  74                                         </section>
  75                                         <section data-background-transition="slide" data-background="assets/image1.png">
  76                                                 <h2>Background image</h2>
  77                                         </section>
  78                                 </section>
  79
  80                                 <section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111">
  81                                         <h2>Background image</h2>
  82                                         <pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
  83                                 </section>
  84
  85                                 <section data-background="#888888">
  86                                         <h2>Same background twice (1/2)</h2>
  87                                 </section>
  88                                 <section data-background="#888888">
  89                                         <h2>Same background twice (2/2)</h2>
  90                                 </section>
  91
  92                                 <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
  93                                         <h2>Video background</h2>
  94                                 </section>
  95
  96                                 <section data-background-iframe="https://slides.com">
  97                                         <h2>Iframe background</h2>
  98                                 </section>
  99
 100                                 <section>
 101                                         <section data-background="#417203">
 102                                                 <h2>Same background twice vertical (1/2)</h2>
 103                                         </section>
 104                                         <section data-background="#417203">
 105                                                 <h2>Same background twice vertical (2/2)</h2>
 106                                         </section>
 107                                 </section>
 108
 109                                 <section data-background="#934f4d">
 110                                         <h2>Same background from horizontal to vertical (1/3)</h2>
 111                                 </section>
 112                                 <section>
 113                                         <section data-background="#934f4d">
 114                                                 <h2>Same background from horizontal to vertical (2/3)</h2>
 115                                         </section>
 116                                         <section data-background="#934f4d">
 117                                                 <h2>Same background from horizontal to vertical (3/3)</h2>
 118                                         </section>
 119                                 </section>
 120
 121                         </div>
 122
 123                 </div>
 124
 125                 <script src="../../lib/js/head.min.js"></script>
 126                 <script src="../../js/reveal.js"></script>
 127
 128                 <script>
 129
 130                         // Full list of configuration options available here:
 131                         // https://github.com/hakimel/reveal.js#configuration
 132                         Reveal.initialize({
 133                                 center: true,
 134                                 // rtl: true,
 135
 136                                 transition: 'linear',
 137                                 // transitionSpeed: 'slow',
 138                                 // backgroundTransition: 'slide'
 139                         });
 140
 141                 </script>
 142
 143         </body>
 144 </html>