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,
|
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
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 .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
18
index.html
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue