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

     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/news/make-better-presentations/embed?style=hidden&autoSlide=4000">
    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="../../js/reveal.js"></script>
   126  
   127  		<script>
   128  
   129  			// Full list of configuration options available here:
   130  			// https://github.com/hakimel/reveal.js#configuration
   131  			Reveal.initialize({
   132  				center: true,
   133  				// rtl: true,
   134  
   135  				transition: 'linear',
   136  				// transitionSpeed: 'slow',
   137  				// backgroundTransition: 'slide'
   138  			});
   139  
   140  		</script>
   141  
   142  	</body>
   143  </html>