diff --git a/README.md b/README.md index 1236355..bd85726 100644 --- a/README.md +++ b/README.md @@ -154,13 +154,13 @@ Reveal.initialize({ previewLinks: false, // Transition style - transition: 'default', // default/cube/page/concave/zoom/linear/fade/none + transition: 'default', // none/fade/slide/convex/concave/zoom // Transition speed transitionSpeed: 'default', // default/fast/slow // 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 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: @@ -397,7 +395,7 @@ Reveal.initialize({ parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) // This slide transition gives best results: - transition: linear + transition: 'slide' }); ``` diff --git a/css/reveal.css b/css/reveal.css index 548aecc..8022b1e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -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.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); -moz-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); } .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); -moz-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.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); -moz-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); } .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); -moz-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 *********************************************/ @@ -1360,7 +1379,7 @@ body { transition: none; } -/* 2D slide */ +/* Slide */ .reveal[data-background-transition=slide]>.backgrounds .slide-background, .reveal>.backgrounds .slide-background[data-background-transition=slide] { opacity: 1; diff --git a/index.html b/index.html index 993af44..25b0d76 100644 --- a/index.html +++ b/index.html @@ -188,14 +188,12 @@

Transition Styles

You can select from different transitions, like:
- Cube - - Page - - Concave - - Zoom - - Linear - - Fade - + Default - None - - Default + Fade - + Slide - + Concave - + Zoom

@@ -260,14 +258,14 @@ Reveal.addEventListener( 'customevent', function() { -
+

Background Transitions

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

-
+

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide". @@ -401,7 +399,7 @@ function linkify( selector ) { center: true, 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 // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg', diff --git a/js/reveal.js b/js/reveal.js index 06b217b..6daa9f8 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -93,13 +93,13 @@ var Reveal = (function(){ theme: null, // Transition style - transition: 'default', // default/cube/page/concave/zoom/linear/fade/none + transition: 'default', // none/fade/slide/convex/concave/zoom // Transition speed transitionSpeed: 'default', // default/fast/slow // Transition style for full page slide backgrounds - backgroundTransition: 'default', // default/linear/none + backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom // Parallax background image parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg" @@ -2000,7 +2000,7 @@ var Reveal = (function(){ } if( includeAll || h === indexh ) { - toArray( backgroundh.querySelectorAll( 'section' ) ).forEach( function( backgroundv, v ) { + toArray( backgroundh.querySelectorAll( '.slide-background' ) ).forEach( function( backgroundv, v ) { if( v < indexv ) { backgroundv.className = 'slide-background past';