Browse Source

updated copy in slides, added one that explains transitions

embed
Hakim El Hattab 13 years ago
parent
commit
3fa01ab107
  1. 18
      css/main.css
  2. 16
      index.html
  3. 3
      js/reveal.js

18
css/main.css

@ -586,7 +586,7 @@ html {
* BOX TRANSITION
*********************************************/
#reveal.box .slides {
#reveal.cube .slides {
margin-top: -350px;
-webkit-perspective-origin: 50% 25%;
@ -600,14 +600,14 @@ html {
perspective: 1300px;
}
#reveal.box .slides section {
#reveal.cube .slides section {
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#reveal.box .slides section:not(.stack):before {
#reveal.cube .slides section:not(.stack):before {
content: '';
position: absolute;
display: block;
@ -624,7 +624,7 @@ html {
-o-transform: translateZ( -20px );
transform: translateZ( -20px );
}
#reveal.box .slides section:not(.stack):after {
#reveal.cube .slides section:not(.stack):after {
content: '';
position: absolute;
display: block;
@ -645,12 +645,12 @@ html {
transform: translateZ(-90px) rotateX( 65deg );
}
#reveal.box .slides>section.stack {
#reveal.cube .slides>section.stack {
padding: 0;
background: none;
}
#reveal.box .slides>section.past {
#reveal.cube .slides>section.past {
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
@ -662,7 +662,7 @@ html {
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
}
#reveal.box .slides>section.future {
#reveal.cube .slides>section.future {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
@ -674,7 +674,7 @@ html {
transform: translate3d(100%, 0, 0) rotateY(90deg);
}
#reveal.box .slides>section>section.past {
#reveal.cube .slides>section>section.past {
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
@ -686,7 +686,7 @@ html {
transform: translate3d(0, -100%, 0) rotateX(90deg);
}
#reveal.box .slides>section>section.future {
#reveal.cube .slides>section>section.future {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;

16
index.html

@ -74,12 +74,20 @@
<section>
<h2>Holistic Overview</h2>
<p>
Press <em>SPACE</em> to enter the slide overview. This allows you to navigate faster
in larger decks using the keyboard.
Press <strong>SPACE</strong> to enter the slide overview.
</p>
</section>
<section>
<h2>Transition Styles</h2>
<p>
This feature is highly experimental and will be updated to boost performance.
You can select from different transitions, like:
</p>
<ul>
<li><a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a></li>
<li><a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a></li>
<li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li>
</ul>
</section>
<section>
@ -218,7 +226,7 @@
theme: query.theme || 'default', // default/neon
// Transition style
transition: query.transition || 'default' // default/box/page/concave/linear(2d),
transition: query.transition || 'default' // default/cube/page/concave/linear(2d),
});
hljs.initHighlightingOnLoad();

3
js/reveal.js

@ -134,6 +134,9 @@ var Reveal = (function(){
config.transition = options.transition === undefined ? 'default' : options.transition;
config.theme = options.theme === undefined ? 'default' : options.theme;
// Transition alias
if( config.transition === 'box' ) config.transition = 'cube';
// Fall back on the 2D transform theme 'linear'
if( supports3DTransforms === false ) {
config.transition = 'linear';

Loading…
Cancel
Save