xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better transition names, fix background images in vertical slides

Browse Source
This commit is contained in:
Hakim El Hattab 2014-04-06 11:04:58 +02:00
parent c87d7db930
commit a3d4afeeed
4 changed files with 85 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -154,13 +154,13 @@ Reveal.initialize({
previewLinks: false, previewLinks: false,
// Transition style // Transition style
transition: 'default', // default/cube/page/concave/zoom/linear/fade/none transition: 'default', // none/fade/slide/convex/concave/zoom
// Transition speed // Transition speed
transitionSpeed: 'default', // default/fast/slow transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds // Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/none/slide/concave/convex/zoom backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom
// Number of slides away from the current that are visible // Number of slides away from the current that are visible
viewDistance: 3, viewDistance: 3,
@ -175,8 +175,6 @@ Reveal.initialize({
}); });
``` ```
Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (`cube` and `page`). To restore the previous behavior, set `center` to `false`.
The configuration can be updated after initialization using the ```configure``` method: The configuration can be updated after initialization using the ```configure``` method:
@ -397,7 +395,7 @@ Reveal.initialize({
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
// This slide transition gives best results: // This slide transition gives best results:
transition: linear transition: 'slide'
}); });
``` ```

123
css/reveal.css
View File

@ -683,18 +683,79 @@ body {
/********************************************* /*********************************************
* DEFAULT TRANSITION * SLIDE TRANSITION
* Aliased 'linear' for backwards compatibility
*********************************************/
.reveal.slide section.
.reveal.linear section {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.reveal .slides>section[data-transition=slide].past,
.reveal.slide .slides>section:not([data-transition]).past,
.reveal .slides>section[data-transition=linear].past,
.reveal.linear .slides>section:not([data-transition]).past {
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
.reveal .slides>section[data-transition=slide].future,
.reveal.slide .slides>section:not([data-transition]).future,
.reveal .slides>section[data-transition=linear].future,
.reveal.linear .slides>section:not([data-transition]).future {
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
}
.reveal .slides>section>section[data-transition=slide].past,
.reveal.slide .slides>section>section:not([data-transition]).past,
.reveal .slides>section>section[data-transition=linear].past,
.reveal.linear .slides>section>section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-moz-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
-o-transform: translate(0, -150%);
transform: translate(0, -150%);
}
.reveal .slides>section>section[data-transition=slide].future,
.reveal.slide .slides>section>section:not([data-transition]).future,
.reveal .slides>section>section[data-transition=linear].future,
.reveal.linear .slides>section>section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
-o-transform: translate(0, 150%);
transform: translate(0, 150%);
}
/*********************************************
* CONVEX TRANSITION
* Aliased 'default' for backwards compatibility
*********************************************/ *********************************************/
.reveal .slides>section[data-transition=default].past, .reveal .slides>section[data-transition=default].past,
.reveal.default .slides>section:not([data-transition]).past { .reveal.default .slides>section:not([data-transition]).past,
.reveal .slides>section[data-transition=convex].past,
.reveal.convex .slides>section:not([data-transition]).past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
} }
.reveal .slides>section[data-transition=default].future, .reveal .slides>section[data-transition=default].future,
.reveal.default .slides>section:not([data-transition]).future { .reveal.default .slides>section:not([data-transition]).future,
.reveal .slides>section[data-transition=convex].future,
.reveal.convex .slides>section:not([data-transition]).future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
@ -702,14 +763,18 @@ body {
} }
.reveal .slides>section>section[data-transition=default].past, .reveal .slides>section>section[data-transition=default].past,
.reveal.default .slides>section>section:not([data-transition]).past { .reveal.default .slides>section>section:not([data-transition]).past,
.reveal .slides>section>section[data-transition=convex].past,
.reveal.convex .slides>section>section:not([data-transition]).past {
-webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
-moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -moz-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
-ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -ms-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
} }
.reveal .slides>section>section[data-transition=default].future, .reveal .slides>section>section[data-transition=default].future,
.reveal.default .slides>section>section:not([data-transition]).future { .reveal.default .slides>section>section:not([data-transition]).future,
.reveal .slides>section>section[data-transition=convex].future,
.reveal.convex .slides>section>section:not([data-transition]).future {
-webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
-moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); -moz-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
-ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); -ms-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
@ -802,52 +867,6 @@ body {
} }
/*********************************************
* LINEAR TRANSITION
*********************************************/
.reveal.linear section {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.reveal .slides>section[data-transition=linear].past,
.reveal.linear .slides>section:not([data-transition]).past {
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
.reveal .slides>section[data-transition=linear].future,
.reveal.linear .slides>section:not([data-transition]).future {
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
}
.reveal .slides>section>section[data-transition=linear].past,
.reveal.linear .slides>section>section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
-moz-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
-o-transform: translate(0, -150%);
transform: translate(0, -150%);
}
.reveal .slides>section>section[data-transition=linear].future,
.reveal.linear .slides>section>section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
-o-transform: translate(0, 150%);
transform: translate(0, 150%);
}
/********************************************* /*********************************************
* CUBE TRANSITION * CUBE TRANSITION
*********************************************/ *********************************************/
@ -1360,7 +1379,7 @@ body {
transition: none; transition: none;
} }
/* 2D slide */ /* Slide */
.reveal[data-background-transition=slide]>.backgrounds .slide-background, .reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal>.backgrounds .slide-background[data-background-transition=slide] { .reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1; opacity: 1;

18
index.html
View File

@ -188,14 +188,12 @@
<h2>Transition Styles</h2> <h2>Transition Styles</h2>
<p> <p>
You can select from different transitions, like: <br> You can select from different transitions, like: <br>
<a href="?transition=cube#/transitions">Cube</a> - <a href="?#/transitions">Default</a> -
<a href="?transition=page#/transitions">Page</a> -
<a href="?transition=concave#/transitions">Concave</a> -
<a href="?transition=zoom#/transitions">Zoom</a> -
<a href="?transition=linear#/transitions">Linear</a> -
<a href="?transition=fade#/transitions">Fade</a> -
<a href="?transition=none#/transitions">None</a> - <a href="?transition=none#/transitions">None</a> -
<a href="?#/transitions">Default</a> <a href="?transition=fade#/transitions">Fade</a> -
<a href="?transition=slide#/transitions">Slide</a> -
<a href="?transition=concave#/transitions">Concave</a> -
<a href="?transition=zoom#/transitions">Zoom</a>
</p> </p>
</section> </section>
@ -260,14 +258,14 @@ Reveal.addEventListener( 'customevent', function() {
</section> </section>
</section> </section>
<section data-transition="linear" data-background="#4d7e65" data-background-transition="slide"> <section data-transition="slide" data-background="#4d7e65" data-background-transition="slide">
<h2>Background Transitions</h2> <h2>Background Transitions</h2>
<p> <p>
Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade. Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade.
</p> </p>
</section> </section>
<section data-transition="linear" data-background="#8c4738" data-background-transition="slide"> <section data-transition="slide" data-background="#8c4738" data-background-transition="slide">
<h2>Background Transition Override</h2> <h2>Background Transition Override</h2>
<p> <p>
You can override background transitions per slide by using <code>data-background-transition="slide"</code>. You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
@ -401,7 +399,7 @@ function linkify( selector ) {
center: true, center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none transition: Reveal.getQueryHash().transition || 'default', // none/fade/slide/convex/concave/zoom
// Parallax scrolling // Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg', // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',

6
js/reveal.js
View File

@ -93,13 +93,13 @@ var Reveal = (function(){
theme: null, theme: null,
// Transition style // Transition style
transition: 'default', // default/cube/page/concave/zoom/linear/fade/none transition: 'default', // none/fade/slide/convex/concave/zoom
// Transition speed // Transition speed
transitionSpeed: 'default', // default/fast/slow transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds // Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/linear/none backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom
// Parallax background image // Parallax background image
parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg" parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"
@ -2000,7 +2000,7 @@ var Reveal = (function(){
} }
if( includeAll || h === indexh ) { if( includeAll || h === indexh ) {
toArray( backgroundh.querySelectorAll( 'section' ) ).forEach( function( backgroundv, v ) { toArray( backgroundh.querySelectorAll( '.slide-background' ) ).forEach( function( backgroundv, v ) {
if( v < indexv ) { if( v < indexv ) {
backgroundv.className = 'slide-background past'; backgroundv.className = 'slide-background past';