transitions.html 1.9 KB

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