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

   1 <!doctype html>
   2 <html lang="en">
   3
   4         <head>
   5                 <meta charset="utf-8">
   6
   7                 <title>reveal.js - Slide Transitions</title>
   8
   9                 <link rel="stylesheet" href="../../css/reveal.css">
  10                 <link rel="stylesheet" href="../../css/theme/white.css" id="theme">
  11                 <style type="text/css" media="screen">
  12                         .slides section.has-dark-background,
  13                         .slides section.has-dark-background h3 {
  14                                 color: #fff;
  15                         }
  16                         .slides section.has-light-background,
  17                         .slides section.has-light-background h3 {
  18                                 color: #222;
  19                         }
  20                 </style>
  21         </head>
  22
  23         <body>
  24
  25                 <div class="reveal">
  26
  27                         <div class="slides">
  28
  29                                 <section>
  30                                         <h3>Default</h3>
  31                                 </section>
  32
  33                                 <section>
  34                                         <h3>Default</h3>
  35                                 </section>
  36
  37                                 <section data-transition="zoom">
  38                                         <h3>data-transition: zoom</h3>
  39                                 </section>
  40
  41                                 <section data-transition="zoom-in fade-out">
  42                                         <h3>data-transition: zoom-in fade-out</h3>
  43                                 </section>
  44
  45                                 <section>
  46                                         <h3>Default</h3>
  47                                 </section>
  48
  49                                 <section data-transition="convex">
  50                                         <h3>data-transition: convex</h3>
  51                                 </section>
  52
  53                                 <section data-transition="convex-in concave-out">
  54                                         <h3>data-transition: convex-in concave-out</h3>
  55                                 </section>
  56
  57                                 <section>
  58                                         <section data-transition="zoom">
  59                                                 <h3>Default</h3>
  60                                         </section>
  61                                         <section data-transition="concave">
  62                                                 <h3>data-transition: concave</h3>
  63                                         </section>
  64                                         <section data-transition="convex-in fade-out">
  65                                                 <h3>data-transition: convex-in fade-out</h3>
  66                                         </section>
  67                                         <section>
  68                                                 <h3>Default</h3>
  69                                         </section>
  70                                 </section>
  71
  72                                 <section data-transition="none">
  73                                         <h3>data-transition: none</h3>
  74                                 </section>
  75
  76                                 <section>
  77                                         <h3>Default</h3>
  78                                 </section>
  79
  80                         </div>
  81
  82                 </div>
  83
  84                 <script src="../../lib/js/head.min.js"></script>
  85                 <script src="../../js/reveal.js"></script>
  86
  87                 <script>
  88
  89                         Reveal.initialize({
  90                                 center: true,
  91                                 history: true,
  92
  93                                 // transition: 'slide',
  94                                 // transitionSpeed: 'slow',
  95                                 // backgroundTransition: 'slide'
  96                         });
  97
  98                 </script>
  99
 100         </body>
 101 </html>