better transition names, fix background images in vertical slides
This commit is contained in:
Hakim El Hattab
parent
c87d7db930
commit
a3d4afeeed
4 changed files with 85 additions and 70 deletions
|
|
@ -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'
|
||||
|
||||
});
|
||||
```
|
||||
|
|
|
|||
123
css/reveal.css
123
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;
|
||||
|
|
|
|||
18
index.html
18
index.html
|
|
@ -188,14 +188,12 @@
|
|||
<h2>Transition Styles</h2>
|
||||
<p>
|
||||
You can select from different transitions, like: <br>
|
||||
<a href="?transition=cube#/transitions">Cube</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="?#/transitions">Default</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>
|
||||
</section>
|
||||
|
||||
|
|
@ -260,14 +258,14 @@ Reveal.addEventListener( 'customevent', function() {
|
|||
</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>
|
||||
<p>
|
||||
Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade.
|
||||
</p>
|
||||
</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>
|
||||
<p>
|
||||
You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue