kfitz/presentations.kfitz.info
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge conflicts w preview & backgrounds

Browse Source
This commit is contained in:
Hakim El Hattab committed 2013-06-10 16:53:41 -04:00
2 parents 8b355eaba0 424f8ee961
commit 7094f44eb9
14 files changed
+509 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+38 -16
View File
@@ -5,7 +5,7 @@ A framework for easily creating beautiful presentations using HTML. [Check out t
reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
#### More reading::
#### More reading:
- [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
- [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history.
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
@@ -106,6 +106,9 @@ Reveal.initialize({
// Transition speed
transitionSpeed: 'default', // default/fast/slow
// Transition style for full page backgrounds
backgroundTransition: 'default' // default/linear
});
```
@@ -211,18 +214,6 @@ Reveal.getCurrentSlide();
Reveal.getIndices(); // { h: 0, v: 0 } }
```
### States
If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
Furthermore you can also listen to these changes in state via JavaScript:
```javascript
Reveal.addEventListener( 'somestate', function() {
// TODO: Sprinkle magic
}, false );
```
### Ready event
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
@@ -245,6 +236,37 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
} );
```
### States
If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
Furthermore you can also listen to these changes in state via JavaScript:
```javascript
Reveal.addEventListener( 'somestate', function() {
// TODO: Sprinkle magic
}, false );
```
### Slide backgrounds
Slides are contained withing a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a ```data-background``` attribute to your ```<section>``` elements. Below are a few examples.
```html
<section data-background="#ff0000">
<h2>All CSS color formats are supported, like rgba() or hsl().</h2>
</section>
<section data-background="http://example.com/image.png">
<h2>This slide will have a full-size background image.</h2>
</section>
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
<h2>This background image will be sized to 100px and repeated.</h2>
</section>
```
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'linear'``` to the ```Reveal.initialize()``` call.
### Internal links
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
@@ -282,7 +304,7 @@ Note that this does not work with the page and cube transitions.
### Fragments
Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
@@ -583,11 +605,11 @@ The **basic setup** is for authoring presentations only. The **full setup** give
### Basic setup
The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.g
The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.
1. Download a copy of reveal.js from <https://github.com/hakimel/reveal.js/archive/master.zip>
2. Unizp and replace the example contents in index.html with your own
2. Unzip and replace the example contents in index.html with your own
3. Open index.html in a browser to view it
css/print/pdf.css
+27 -15
View File
@@ -17,8 +17,9 @@
body {
font-size: 18pt;
width: auto;
height: auto;
width: 297mm;
height: 229mm;
margin: 0 auto !important;
border: 0;
padding: 0;
float: none !important;
@@ -88,10 +89,8 @@ ul, ol, div, p {
left: auto;
top: auto;
margin-left: auto;
margin-right: auto;
margin-top: auto;
padding: auto;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
display: block;
@@ -113,18 +112,18 @@ ul, ol, div, p {
page-break-after: always !important;
visibility: visible !important;
position: static !important;
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: initial !important;
height: 229mm !important;
min-height: 229mm !important;
display: block !important;
overflow: visible !important;
overflow: hidden !important;
left: 0 !important;
top: 0 !important;
margin-left: 0px !important;
margin-top: 50px !important;
padding: 20px 0px !important;
margin: 0 !important;
padding: 2cm 1cm 0 1cm !important;
box-sizing: border-box !important;
opacity: 1 !important;
@@ -139,9 +138,11 @@ ul, ol, div, p {
transform: none !important;
}
.reveal section.stack {
margin: 0px !important;
padding: 0px !important;
margin: 0 !important;
padding: 0 !important;
page-break-after: avoid !important;
height: auto !important;
min-height: auto !important;
}
.reveal section .fragment {
opacity: 1 !important;
@@ -152,6 +153,17 @@ ul, ol, div, p {
-ms-transform: none !important;
transform: none !important;
}
.reveal section .slide-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 0;
}
.reveal section>* {
position: relative;
z-index: 1;
}
.reveal img {
box-shadow: none;
}
css/reveal.css
+106 -7
View File
@@ -1252,17 +1252,18 @@ body {
left: 0;
}
.no-transition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
.reveal .no-transition,
.reveal .no-transition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
/*********************************************
* BACKGROUND STATES
* BACKGROUND STATES [DEPRECATED]
*********************************************/
.reveal .state-background {
@@ -1306,6 +1307,104 @@ body {
}
/*********************************************
*
*********************************************/
.reveal>.backgrounds {
position: absolute;
width: 100%;
height: 100%;
}
.reveal .slide-background {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background-color: rgba( 0, 0, 0, 0 );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.reveal .slide-background.present {
opacity: 1;
visibility: visible;
}
.print-pdf .reveal .slide-background {
opacity: 1 !important;
visibility: visible !important;
}
/* Linear sliding transition style */
.reveal[data-background-transition=linear]>.backgrounds .slide-background {
opacity: 1;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-duration: 800ms;
-moz-transition-duration: 800ms;
-ms-transition-duration: 800ms;
-o-transition-duration: 800ms;
transition-duration: 800ms;
}
.reveal[data-background-transition=linear]>.backgrounds .slide-background.past {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.reveal[data-background-transition=linear]>.backgrounds .slide-background.future {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.reveal[data-background-transition=linear]>.backgrounds .slide-background>.slide-background.past {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.reveal[data-background-transition=linear]>.backgrounds .slide-background>.slide-background.future {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}
/* Global transition speed settings */
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
-webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration: 400ms;
transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
-webkit-transition-duration: 1200ms;
-moz-transition-duration: 1200ms;
-ms-transition-duration: 1200ms;
transition-duration: 1200ms;
}
/*********************************************
* RTL SUPPORT
*********************************************/
css/reveal.min.css
Vendored
+1 -1
View File
@@ -4,4 +4,4 @@
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/ html,body,.reveal div,.reveal span,.reveal applet,.reveal object,.reveal iframe,.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6,.reveal p,.reveal blockquote,.reveal pre,.reveal a,.reveal abbr,.reveal acronym,.reveal address,.reveal big,.reveal cite,.reveal code,.reveal del,.reveal dfn,.reveal em,.reveal img,.reveal ins,.reveal kbd,.reveal q,.reveal s,.reveal samp,.reveal small,.reveal strike,.reveal strong,.reveal sub,.reveal sup,.reveal tt,.reveal var,.reveal b,.reveal u,.reveal i,.reveal center,.reveal dl,.reveal dt,.reveal dd,.reveal ol,.reveal ul,.reveal li,.reveal fieldset,.reveal form,.reveal label,.reveal legend,.reveal table,.reveal caption,.reveal tbody,.reveal tfoot,.reveal thead,.reveal tr,.reveal th,.reveal td,.reveal article,.reveal aside,.reveal canvas,.reveal details,.reveal embed,.reveal figure,.reveal figcaption,.reveal footer,.reveal header,.reveal hgroup,.reveal menu,.reveal nav,.reveal output,.reveal ruby,.reveal section,.reveal summary,.reveal time,.reveal mark,.reveal audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}.reveal article,.reveal aside,.reveal details,.reveal figcaption,.reveal figure,.reveal footer,.reveal header,.reveal hgroup,.reveal menu,.reveal nav,.reveal section{display:block}html,body{width:100%;height:100%;overflow:hidden}body{position:relative;line-height:1}::selection{background:#FF5E99;color:#fff;text-shadow:none}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;word-wrap:break-word}.reveal h1{font-size:3.77em}.reveal h2{font-size:2.11em}.reveal h3{font-size:1.55em}.reveal h4{font-size:1em}.reveal .slides section .fragment{opacity:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.reveal .slides section .fragment.visible{opacity:1}.reveal .slides section .fragment.grow{opacity:1}.reveal .slides section .fragment.grow.visible{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3)}.reveal .slides section .fragment.shrink{opacity:1}.reveal .slides section .fragment.shrink.visible{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)}.reveal .slides section .fragment.zoom-in{opacity:0;-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-ms-transform:scale(0.1);-o-transform:scale(0.1);transform:scale(0.1)}.reveal .slides section .fragment.zoom-in.visible{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.reveal .slides section .fragment.roll-in{opacity:0;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);-o-transform:rotateX(90deg);transform:rotateX(90deg)}.reveal .slides section .fragment.roll-in.visible{opacity:1;-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);-o-transform:rotateX(0);transform:rotateX(0)}.reveal .slides section .fragment.fade-out{opacity:1}.reveal .slides section .fragment.fade-out.visible{opacity:0}.reveal .slides section .fragment.semi-fade-out{opacity:1}.reveal .slides section .fragment.semi-fade-out.visible{opacity:.5}.reveal .slides section .fragment.highlight-red,.reveal .slides section .fragment.highlight-green,.reveal .slides section .fragment.highlight-blue{opacity:1}.reveal .slides section .fragment.highlight-red.visible{color:#ff2c2d}.reveal .slides section .fragment.highlight-green.visible{color:#17ff2e}.reveal .slides section .fragment.highlight-blue.visible{color:#1b91ff}.reveal:after{content:'';font-style:italic}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal a{position:relative}.reveal strong,.reveal b{font-weight:700}.reveal em,.reveal i{font-style:italic}.reveal ol,.reveal ul{display:inline-block;text-align:left;margin:0 0 0 1em}.reveal ol{list-style-type:decimal}.reveal ul{list-style-type:disc}.reveal ul ul{list-style-type:square}.reveal ul ul ul{list-style-type:circle}.reveal ul ul,.reveal ul ol,.reveal ol ol,.reveal ol ul{display:block;margin-left:40px}.reveal p{margin-bottom:10px;line-height:1.2em}.reveal q,.reveal blockquote{quotes:none}.reveal blockquote{display:block;position:relative;width:70%;margin:5px auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0 0 2px rgba(0,0,0,.2)}.reveal blockquote p:first-child,.reveal blockquote p:last-child{display:inline-block}.reveal q{font-style:italic}.reveal pre{display:block;position:relative;width:90%;margin:15px auto;text-align:left;font-size:.55em;font-family:monospace;line-height:1.2em;word-wrap:break-word;box-shadow:0 0 6px rgba(0,0,0,.3)}.reveal code{font-family:monospace}.reveal pre code{padding:5px;overflow:auto;max-height:400px;word-wrap:normal}.reveal table th,.reveal table td{text-align:left;padding-right:.3emLine truncated
*/ html,body,.reveal div,.reveal span,.reveal applet,.reveal object,.reveal iframe,.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6,.reveal p,.reveal blockquote,.reveal pre,.reveal a,.reveal abbr,.reveal acronym,.reveal address,.reveal big,.reveal cite,.reveal code,.reveal del,.reveal dfn,.reveal em,.reveal img,.reveal ins,.reveal kbd,.reveal q,.reveal s,.reveal samp,.reveal small,.reveal strike,.reveal strong,.reveal sub,.reveal sup,.reveal tt,.reveal var,.reveal b,.reveal u,.reveal i,.reveal center,.reveal dl,.reveal dt,.reveal dd,.reveal ol,.reveal ul,.reveal li,.reveal fieldset,.reveal form,.reveal label,.reveal legend,.reveal table,.reveal caption,.reveal tbody,.reveal tfoot,.reveal thead,.reveal tr,.reveal th,.reveal td,.reveal article,.reveal aside,.reveal canvas,.reveal details,.reveal embed,.reveal figure,.reveal figcaption,.reveal footer,.reveal header,.reveal hgroup,.reveal menu,.reveal nav,.reveal output,.reveal ruby,.reveal section,.reveal summary,.reveal time,.reveal mark,.reveal audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}.reveal article,.reveal aside,.reveal details,.reveal figcaption,.reveal figure,.reveal footer,.reveal header,.reveal hgroup,.reveal menu,.reveal nav,.reveal section{display:block}html,body{width:100%;height:100%;overflow:hidden}body{position:relative;line-height:1}::selection{background:#FF5E99;color:#fff;text-shadow:none}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;word-wrap:break-word}.reveal h1{font-size:3.77em}.reveal h2{font-size:2.11em}.reveal h3{font-size:1.55em}.reveal h4{font-size:1em}.reveal .slides section .fragment{opacity:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.reveal .slides section .fragment.visible{opacity:1}.reveal .slides section .fragment.grow{opacity:1}.reveal .slides section .fragment.grow.visible{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3)}.reveal .slides section .fragment.shrink{opacity:1}.reveal .slides section .fragment.shrink.visible{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)}.reveal .slides section .fragment.zoom-in{opacity:0;-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-ms-transform:scale(0.1);-o-transform:scale(0.1);transform:scale(0.1)}.reveal .slides section .fragment.zoom-in.visible{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.reveal .slides section .fragment.roll-in{opacity:0;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);-o-transform:rotateX(90deg);transform:rotateX(90deg)}.reveal .slides section .fragment.roll-in.visible{opacity:1;-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);-o-transform:rotateX(0);transform:rotateX(0)}.reveal .slides section .fragment.fade-out{opacity:1}.reveal .slides section .fragment.fade-out.visible{opacity:0}.reveal .slides section .fragment.semi-fade-out{opacity:1}.reveal .slides section .fragment.semi-fade-out.visible{opacity:.5}.reveal .slides section .fragment.highlight-red,.reveal .slides section .fragment.highlight-green,.reveal .slides section .fragment.highlight-blue{opacity:1}.reveal .slides section .fragment.highlight-red.visible{color:#ff2c2d}.reveal .slides section .fragment.highlight-green.visible{color:#17ff2e}.reveal .slides section .fragment.highlight-blue.visible{color:#1b91ff}.reveal:after{content:'';font-style:italic}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal a{position:relative}.reveal strong,.reveal b{font-weight:700}.reveal em,.reveal i{font-style:italic}.reveal ol,.reveal ul{display:inline-block;text-align:left;margin:0 0 0 1em}.reveal ol{list-style-type:decimal}.reveal ul{list-style-type:disc}.reveal ul ul{list-style-type:square}.reveal ul ul ul{list-style-type:circle}.reveal ul ul,.reveal ul ol,.reveal ol ol,.reveal ol ul{display:block;margin-left:40px}.reveal p{margin-bottom:10px;line-height:1.2em}.reveal q,.reveal blockquote{quotes:none}.reveal blockquote{display:block;position:relative;width:70%;margin:5px auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0 0 2px rgba(0,0,0,.2)}.reveal blockquote p:first-child,.reveal blockquote p:last-child{display:inline-block}.reveal q{font-style:italic}.reveal pre{display:block;position:relative;width:90%;margin:15px auto;text-align:left;font-size:.55em;font-family:monospace;line-height:1.2em;word-wrap:break-word;box-shadow:0 0 6px rgba(0,0,0,.3)}.reveal code{font-family:monospace}.reveal pre code{padding:5px;overflow:auto;max-height:400px;word-wrap:normal}.reveal table th,.reveal table td{text-align:left;padding-right:.3emLine truncated
index.html
+26 -23
View File
@@ -183,29 +183,12 @@
</section>
<section>
<section data-state="alert">
<h2>Global State</h2>
<p>
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the background.
</p>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-state="blackout">
<h2>"blackout"</h2>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-state="soothe">
<h2>"soothe"</h2>
<a href="#" class="image navigate-next">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
</a>
</section>
<h2>Global State</h2>
<p>
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the background.
</p>
</section>
<section data-state="customevent">
@@ -220,6 +203,26 @@ Reveal.addEventListener( 'customevent', function() {
</code></pre>
</section>
<section>
<section data-background="#007777">
<h2>Slide Backgrounds</h2>
<p>
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
</p>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
<h2>Image Backgrounds</h2>
<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Repeated Image Backgrounds</h2>
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section>
</section>
<section>
<h2>Clever Quotes</h2>
<p>
js/reveal.js
+151 -8
View File
@@ -82,6 +82,9 @@ var Reveal = (function(){
// Transition speed
transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/linear
// Script dependencies to load
dependencies: []
},
@@ -189,6 +192,13 @@ var Reveal = (function(){
dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' );
// Background element
if( !document.querySelector( '.reveal .backgrounds' ) ) {
dom.background = document.createElement( 'div' );
dom.background.classList.add( 'backgrounds' );
dom.wrapper.appendChild( dom.background );
}
// Progress bar
if( !dom.wrapper.querySelector( '.progress' ) ) {
var progressElement = document.createElement( 'div' );
@@ -208,11 +218,11 @@ var Reveal = (function(){
dom.wrapper.appendChild( controlsElement );
}
// Presentation background element
// State background element [DEPRECATED]
if( !dom.wrapper.querySelector( '.state-background' ) ) {
var backgroundElement = document.createElement( 'div' );
backgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( backgroundElement );
var stateBackgroundElement = document.createElement( 'div' );
stateBackgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( stateBackgroundElement );
}
// Overlay graphic which is displayed during the paused mode
@@ -240,6 +250,86 @@ var Reveal = (function(){
}
/**
* Creates the slide background elements and appends them
* to the background container. One element is created per
* slide no matter if the given slide has visible background.
*/
function createBackgrounds() {
if( isPrintingPDF() ) {
document.body.classList.add( 'print-pdf' );
}
// Clear prior backgrounds
dom.background.innerHTML = '';
dom.background.classList.add( 'no-transition' );
// Helper method for creating a background element for the
// given slide
function _createBackground( slide, container ) {
var data = {
background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' )
};
var element = document.createElement( 'div' );
element.className = 'slide-background';
if( data.background ) {
// Auto-wrap image urls in url(...)
if( /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
element.style.backgroundImage = 'url('+ data.background +')';
}
else {
element.style.background = data.background;
}
}
// Additional and optional background properties
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
container.appendChild( element );
return element;
}
// Iterate over all horizontal slides
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
var backgroundStack;
if( isPrintingPDF() ) {
backgroundStack = _createBackground( slideh, slideh );
}
else {
backgroundStack = _createBackground( slideh, dom.background );
}
// Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
if( isPrintingPDF() ) {
_createBackground( slidev, slidev );
}
else {
_createBackground( slidev, backgroundStack );
}
} );
} );
}
/**
* Hides the address bar if we're on a mobile device.
*/
@@ -351,6 +441,7 @@ var Reveal = (function(){
dom.wrapper.classList.add( config.transition );
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
if( dom.controls ) {
dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
@@ -570,6 +661,15 @@ var Reveal = (function(){
}
/**
* Checks if this instance is being used to print a PDF.
*/
function isPrintingPDF() {
return ( /print-pdf/gi ).test( window.location.search );
}
/**
* Causes the address bar to hide on mobile devices,
* more vertical space ftw.
@@ -770,7 +870,7 @@ var Reveal = (function(){
*/
function layout() {
if( dom.wrapper ) {
if( dom.wrapper && !isPrintingPDF() ) {
// Available space to scale within
var availableWidth = dom.wrapper.offsetWidth,
@@ -1262,7 +1362,8 @@ var Reveal = (function(){
}
// Dispatch an event if the slide changed
if( indexh !== indexhBefore || indexv !== indexvBefore ) {
var slideChanged = ( indexh !== indexhBefore || indexv !== indexvBefore );
if( slideChanged ) {
dispatchEvent( 'slidechanged', {
'indexh': indexh,
'indexv': indexv,
@@ -1299,11 +1400,14 @@ var Reveal = (function(){
}
// Handle embedded content
stopEmbeddedContent( previousSlide );
startEmbeddedContent( currentSlide );
if( slideChanged ) {
stopEmbeddedContent( previousSlide );
startEmbeddedContent( currentSlide );
}
updateControls();
updateProgress();
updateBackground();
}
@@ -1327,8 +1431,12 @@ var Reveal = (function(){
// Start auto-sliding if it's enabled
cueAutoSlide();
// Re-create the slide backgrounds
createBackgrounds();
updateControls();
updateProgress();
updateBackground();
}
@@ -1385,6 +1493,9 @@ var Reveal = (function(){
element.classList.remove( 'present' );
element.classList.remove( 'future' );
// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
element.setAttribute( 'hidden', '' );
if( i < index ) {
// Any element previous to index is given the 'past' class
element.classList.add( reverse ? 'future' : 'past' );
@@ -1402,6 +1513,7 @@ var Reveal = (function(){
// Mark the current slide as present
slides[index].classList.add( 'present' );
slides[index].removeAttribute( 'hidden' );
// If this slide has a state associated with it, add it
// onto the current state of the deck
@@ -1533,6 +1645,37 @@ var Reveal = (function(){
}
/**
* Updates the background elements to reflect the current
* slide.
*/
function updateBackground() {
// Update the classes of all backgrounds to match the
// states of their slides (past/present/future)
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
// Reverse past/future classes when in RTL mode
var horizontalPast = config.rtl ? 'future' : 'past',
horizontalFuture = config.rtl ? 'past' : 'future';
backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
} );
} );
// Allow the first background to apply without transition
setTimeout( function() {
dom.background.classList.remove( 'no-transition' );
}, 1 );
}
/**
* Determine what available routes there are for navigation.
*
js/reveal.min.js
Vendored
+2 -2
View File
@@ -1,8 +1,8 @@
/*!
* reveal.js 2.5.0 (2013-05-20, 00:27)
* reveal.js 2.5.0 (2013-06-10, 16:46)
* http://lab.hakim.se/reveal-js
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/
var Reveal=function(){"use strict";function e(e){return Yt||Ot?(window.addEventListener("load",b,!1),c(kt,e),n(),r(),void 0):(document.body.setAttribute("class","no-transforms"),void 0)}function t(){if(Ct.theme=document.querySelector("#theme"),Ct.wrapper=document.querySelector(".reveal"),Ct.slides=document.querySelector(".reveal .slides"),!Ct.wrapper.querySelector(".progress")){var e=document.createElement("div");e.classList.add("progress"),e.innerHTML="<span></span>",Ct.wrapper.appendChild(e)}if(!Ct.wrapper.querySelector(".controls")){var t=document.createElement("aside");t.classList.add("controls"),t.innerHTML='<div class="navigate-left"></div><div class="navigate-right"></div><div class="navigate-up"></div><div class="navigate-down"></div>',Ct.wrapper.appendChild(t)}if(!Ct.wrapper.querySelector(".state-background")){var n=document.createElement("div");n.classList.add("state-background"),Ct.wrapper.appendChild(n)}if(!Ct.wrapper.querySelector(".pause-overlay")){var r=document.createElement("div");r.classList.add("pause-overlay"),Ct.wrapper.appendChild(r)}Ct.progress=document.querySelector(".reveal .progress"),Ct.progressbar=document.querySelector(".reveal .progress span"),kt.controls&&(Ct.controls=document.querySelector(".reveal .controls"),Ct.controlsLeft=l(document.querySelectorAll(".navigate-left")),Ct.controlsRight=l(document.querySelectorAll(".navigate-right")),Ct.controlsUp=l(document.querySelectorAll(".navigate-up")),Ct.controlsDown=l(document.querySelectorAll(".navigate-down")),Ct.controlsPrev=l(document.querySelectorAll(".navigate-prev")),Ct.controlsNext=l(document.querySelectorAll(".navigate-next")))}function n(){/iphone|ipod|android/gi.test(navigator.userAgent)&&!/crios/gi.test(navigator.userAgent)&&(window.addEventListener("load",f,!1),window.addEventListener("orientationchange",f,!1))}function r(){function e(){n.length&&head.js.apply(null,n),o()}for(var t=[],n=[],r=0,a=kt.dependencies.length;a>r;r++){var i=kt.dependencies[r];(!i.condition||i.condition())&&(i.async?n.push(i.src):t.push(i.src),"function"==typeof i.callback&&head.ready(i.src.match(/([\w\d_\-]*)\.?js$|[^\\\/]*$/i)[0],i.callback))}t.length?(head.ready(e),head.js.apply(null,t)):e()}function o(){t(),a(),F(),setTimeout(function(){v("ready",{indexh:Mt,indexv:Pt,currentSlide:Et})},1)}function a(e){if(Ct.wrapper.classList.remove(kt.transition),"object"==typeof e&&c(kt,e),Ot===!1&&(kt.transition="linear"),Ct.wrapper.classList.add(kt.transition),Ct.wrapper.setAttribute("data-transition-speed",kt.transitionSpeed),Ct.controls&&(Ct.controls.style.display=kt.controls&&Ct.controls?"block":"none"),Ct.progress&&(Ct.progress.style.display=kt.progress&&Ct.progress?"block":"none"),kt.rtl?Ct.wrapper.classList.add("rtl"):Ct.wrapper.classList.remove("rtl"),kt.center?Ct.wrapper.classList.add("center"):Ct.wrapper.classList.remove("center"),kt.mouseWheel?(document.addEventListener("DOMMouseScroll",lt,!1),document.addEventListener("mousewheel",lt,!1)):(document.removeEventListener("DOMMouseScroll",lt,!1),document.removeEventListener("mousewheel",lt,!1)),kt.rollingLinks?p():m(),kt.previewLinks?h():(g(),h("[data-preview-link]")),kt.theme&&Ct.theme){var t=Ct.theme.getAttribute("href"),n=/[^\/]*?(?=\.css)/,r=t.match(n)[0];kt.theme!==r&&(t=t.replace(n,kt.theme),Ct.theme.setAttribute("href",t))}Y()}function i(){Ut=!0,window.addEventListener("hashchange",gt,!1),window.addEventListener("resize",yt,!1),kt.touch&&(Ct.wrapper.addEventListener("touchstart",rt,!1),Ct.wrapper.addEventListener("touchmove",ot,!1),Ct.wrapper.addEventListener("touchend",at,!1),window.navigator.msPointerEnabled&&(Ct.wrapper.addEventListener("MSPointerDown",it,!1),Ct.wrapper.addEventListener("MSPointerMove",st,!1),Ct.wrapper.addEventListener("MSPointerUp",ct,!1))),kt.keyboard&&document.addEventListener("keydown",nt,!1),kt.progress&&Ct.progress&&Ct.progress.addEventListener("click",dt,!1),kt.controls&&Ct.controls&&["touchstart","click"].forEach(function(e){Ct.controlsLeft.forEach(function(t){t.addEventListener(e,ut,!1)}),Ct.controlsRight.forEach(function(t){t.addEventListener(e,ft,!1)}),Ct.controlsUp.forEach(function(t){t.addEventListener(e,vt,!1)}),Ct.controlsDown.forEach(function(t){t.addEventListener(e,pt,!1)}),Ct.controlsPrev.forEach(function(t){t.addEventListener(e,mt,!1)}),Ct.controlsNext.forEach(function(t){t.addEventListener(e,ht,!1)})})}function s(){Ut=!1,document.removeEventListener("keydown",nt,!1),window.removeEventListener("hashchange",gt,!1),window.removeEventListener("resize",yt,!1),Ct.wrapper.removeEventListener("touchstart",rt,!1),Ct.wrapper.removeEventListener("touchmove",ot,!1),Ct.wrapper.removeEventListener("touchend",at,!1),window.navigator.msPointerEnabled&&(Ct.wrapper.removeEventListener("MSPointerDown",it,!1),Ct.wrapper.removeEventListener("MSPointerMove",st,!1),Ct.wrapper.removeEventListener("MSPointerUp",ct,!1)),kt.progress&&Ct.progress&&Ct.progress.removeEventListener("click",dt,!1),kt.controls&&Ct.controls&&["touchstart","click"].forEach(function(e){Ct.controlsLeftLine truncated
var Reveal=function(){"use strict";function e(e){return Ht||zt?(window.addEventListener("load",S,!1),l(Pt,e),r(),o(),void 0):(document.body.setAttribute("class","no-transforms"),void 0)}function t(){if(Yt.theme=document.querySelector("#theme"),Yt.wrapper=document.querySelector(".reveal"),Yt.slides=document.querySelector(".reveal .slides"),document.querySelector(".reveal .backgrounds")||(Yt.background=document.createElement("div"),Yt.background.classList.add("backgrounds"),Yt.wrapper.appendChild(Yt.background)),!Yt.wrapper.querySelector(".progress")){var e=document.createElement("div");e.classList.add("progress"),e.innerHTML="<span></span>",Yt.wrapper.appendChild(e)}if(!Yt.wrapper.querySelector(".controls")){var t=document.createElement("aside");t.classList.add("controls"),t.innerHTML='<div class="navigate-left"></div><div class="navigate-right"></div><div class="navigate-up"></div><div class="navigate-down"></div>',Yt.wrapper.appendChild(t)}if(!Yt.wrapper.querySelector(".state-background")){var n=document.createElement("div");n.classList.add("state-background"),Yt.wrapper.appendChild(n)}if(!Yt.wrapper.querySelector(".pause-overlay")){var r=document.createElement("div");r.classList.add("pause-overlay"),Yt.wrapper.appendChild(r)}Yt.progress=document.querySelector(".reveal .progress"),Yt.progressbar=document.querySelector(".reveal .progress span"),Pt.controls&&(Yt.controls=document.querySelector(".reveal .controls"),Yt.controlsLeft=d(document.querySelectorAll(".navigate-left")),Yt.controlsRight=d(document.querySelectorAll(".navigate-right")),Yt.controlsUp=d(document.querySelectorAll(".navigate-up")),Yt.controlsDown=d(document.querySelectorAll(".navigate-down")),Yt.controlsPrev=d(document.querySelectorAll(".navigate-prev")),Yt.controlsNext=d(document.querySelectorAll(".navigate-next")))}function n(){function e(e,t){var n={background:e.getAttribute("data-background"),backgroundSize:e.getAttribute("data-background-size"),backgroundColor:e.getAttribute("data-background-color"),backgroundRepeat:e.getAttribute("data-background-repeat"),backgroundPosition:e.getAttribute("data-background-position")},r=document.createElement("div");return r.className="slide-background",n.background&&(/\.(png|jpg|jpeg|gif|bmp)$/gi.test(n.background)?r.style.backgroundImage="url("+n.background+")":r.style.background=n.background),n.backgroundSize&&(r.style.backgroundSize=n.backgroundSize),n.backgroundColor&&(r.style.backgroundColor=n.backgroundColor),n.backgroundRepeat&&(r.style.backgroundRepeat=n.backgroundRepeat),n.backgroundPosition&&(r.style.backgroundPosition=n.backgroundPosition),t.appendChild(r),r}v()&&document.body.classList.add("print-pdf"),Yt.background.innerHTML="",Yt.background.classList.add("no-transition"),d(document.querySelectorAll(xt)).forEach(function(t){var n;n=v()?e(t,t):e(t,Yt.background),d(t.querySelectorAll("section")).forEach(function(t){v()?e(t,t):e(t,n)})})}function r(){/iphone|ipod|android/gi.test(navigator.userAgent)&&!/crios/gi.test(navigator.userAgent)&&(window.addEventListener("load",p,!1),window.addEventListener("orientationchange",p,!1))}function o(){function e(){n.length&&head.js.apply(null,n),a()}for(var t=[],n=[],r=0,o=Pt.dependencies.length;o>r;r++){var i=Pt.dependencies[r];(!i.condition||i.condition())&&(i.async?n.push(i.src):t.push(i.src),"function"==typeof i.callback&&head.ready(i.src.match(/([\w\d_\-]*)\.?js$|[^\\\/]*$/i)[0],i.callback))}t.length?(head.ready(e),head.js.apply(null,t)):e()}function a(){t(),i(),K(),setTimeout(function(){m("ready",{indexh:Ct,indexv:Dt,currentSlide:At})},1)}function i(e){if(Yt.wrapper.classList.remove(Pt.transition),"object"==typeof e&&l(Pt,e),zt===!1&&(Pt.transition="linear"),Yt.wrapper.classList.add(Pt.transition),Yt.wrapper.setAttribute("data-transition-speed",Pt.transitionSpeed),Yt.wrapper.setAttribute("data-background-transition",Pt.backgroundTransition),Yt.controls&&(Yt.controls.style.display=Pt.controls&&Yt.controls?"block":"none"),Yt.progress&&(Yt.progress.style.display=Pt.progress&&Yt.progress?"block":"none"),Pt.rtl?Yt.wrapper.classList.add("rtl"):Yt.wrapper.classList.remove("rtl"),Pt.center?Yt.wrapper.classList.add("center"):Yt.wrapper.classList.remove("center"),Pt.mouseWheel?(document.addEventListener("DOMMouseScroll",ft,!1),document.addEventListener("mousewheel",ft,!1)):(document.removeEventListener("DOMMouseScroll",ft,!1),document.removeEventListener("mousewheel",ft,!1)),Pt.rollingLinks?h():g(),Pt.previewLinks?y():(b(),y("[data-preview-link]")),Pt.theme&&Yt.theme){var t=Yt.theme.getAttribute("href"),n=/[^\/]*?(?=\.css)/,r=t.match(n)[0];Pt.theme!==r&&(t=t.replace(n,Pt.theme),Yt.theme.setAttribute("href",t))}z()}function s(){Ft=!0,window.addEventListener("hashchange",wt,!1),window.addEventListener("resize",Lt,!1),Pt.touch&&(Yt.wrapper.addEventListener("touchstart",it,!1),Yt.wrapper.addEventListener("touchmove",st,!1),Yt.wrapper.addEventListener("touchend",ct,!1),window.navigator.msPointerEnabled&&(Yt.wrapper.addEventListener("MSPointerDown",lt,!1),Yt.wrappeLine truncated
plugin/multiplex/index.js
+1
View File
@@ -30,6 +30,7 @@ app.configure(function() {
});
app.get("/", function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
});
plugin/notes-server/index.js
+1
View File
@@ -30,6 +30,7 @@ app.configure(function() {
});
app.get("/", function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
});
plugin/notes/notes.html
+3 -3
View File
@@ -213,9 +213,9 @@
now = new Date();
diff = now.getTime() - start.getTime();
hours = parseInt( diff / ( 1000 * 60 * 60 ) );
minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = parseInt( ( diff / 1000 ) % 60 );
hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = Math.floor( ( diff / 1000 ) % 60 );
clockEl.innerHTML = now.toLocaleTimeString();
hoursEl.innerHTML = zeroPadInteger( hours );
test/assets/image1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

test/assets/image2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

test/background.html
+95
View File
@@ -0,0 +1,95 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../css/reveal.min.css">
<link rel="stylesheet" href="../css/theme/serif.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="#00ffff">
<h2>data-background: #00ffff</h2>
</section>
<section data-background="#bb00bb">
<h2>data-background: #bb00bb</h2>
</section>
<section>
<section data-background="#ff0000">
<h2>data-background: #ff0000</h2>
</section>
<section data-background="rgba(0, 0, 0, 0.2)">
<h2>data-background: rgba(0, 0, 0, 0.2)</h2>
</section>
<section data-background="salmon">
<h2>data-background: salmon</h2>
</section>
</section>
<section data-background="rgba(0, 100, 100, 0.2)">
<section>
<h2>Background applied to stack</h2>
</section>
<section>
<h2>Background applied to stack</h2>
</section>
<section data-background="rgba(100, 0, 0, 0.2)">
<h2>Background applied to slide inside of stack</h2>
</section>
</section>
<section data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
<h2>Background image</h2>
</section>
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
<h2>Background image</h2>
<pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
</section>
<section data-background="#888888">
<h2>Same background twice (1/2)</h2>
</section>
<section data-background="#888888">
<h2>Same background twice (2/2)</h2>
</section>
</div>
</div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
// rtl: true,
transition: 'linear',
// transitionSpeed: 'slow',
// backgroundTransition: 'linear'
});
</script>
</body>
</html>
test/media.html
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../css/reveal.min.css">
<link rel="stylesheet" href="../css/theme/default.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Embedded Media Test</h2>
</section>
<section>
<iframe data-autoplay width="420" height="345" src="http://www.youtube.com/embed/l3RQZ4mcr1c"></iframe>
</section>
<section>
<h2>Empty Slide</h2>
</section>
</div>
</div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'linear',
// transitionSpeed: 'slow',
// backgroundTransition: 'linear'
});
</script>
</body>
</html>