github.com/mweagle/Sparta@v1.15.0/docs_source/static/presentations/reveal.js-3.9.2/test/examples/slide-transitions.html (about)

     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="../../js/reveal.js"></script>
    85  
    86  		<script>
    87  
    88  			Reveal.initialize({
    89  				center: true,
    90  				history: true,
    91  
    92  				// transition: 'slide',
    93  				// transitionSpeed: 'slow',
    94  				// backgroundTransition: 'slide'
    95  			});
    96  
    97  		</script>
    98  
    99  	</body>
   100  </html>