linear sliding transition option for full page backgrounds (#453)
This commit is contained in:
Hakim El Hattab
parent
c11e8f624f
commit
15f24f7a9a
5 changed files with 69 additions and 22 deletions
|
|
@ -1321,30 +1321,69 @@ body {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
-webkit-transition: all 800ms ease;
|
-webkit-transition: all 650ms ease;
|
||||||
-moz-transition: all 800ms ease;
|
-moz-transition: all 650ms ease;
|
||||||
-ms-transition: all 800ms ease;
|
-ms-transition: all 650ms ease;
|
||||||
-o-transition: all 800ms ease;
|
-o-transition: all 650ms ease;
|
||||||
transition: all 800ms ease;
|
transition: all 650ms ease;
|
||||||
}
|
}
|
||||||
.reveal>.background div.present {
|
.reveal>.background div.present {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Linear sliding transition style */
|
||||||
|
.reveal[data-background-transition=linear]>.background div {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
-moz-backface-visibility: hidden;
|
||||||
|
-ms-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
.reveal[data-background-transition=linear]>.background div.past {
|
||||||
|
-webkit-transform: translate(-100%, 0);
|
||||||
|
-moz-transform: translate(-100%, 0);
|
||||||
|
-ms-transform: translate(-100%, 0);
|
||||||
|
-o-transform: translate(-100%, 0);
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
}
|
||||||
|
.reveal[data-background-transition=linear]>.background div.future {
|
||||||
|
-webkit-transform: translate(100%, 0);
|
||||||
|
-moz-transform: translate(100%, 0);
|
||||||
|
-ms-transform: translate(100%, 0);
|
||||||
|
-o-transform: translate(100%, 0);
|
||||||
|
transform: translate(100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal[data-background-transition=linear]>.background div>div.past {
|
||||||
|
-webkit-transform: translate(0, -100%);
|
||||||
|
-moz-transform: translate(0, -100%);
|
||||||
|
-ms-transform: translate(0, -100%);
|
||||||
|
-o-transform: translate(0, -100%);
|
||||||
|
transform: translate(0, -100%);
|
||||||
|
}
|
||||||
|
.reveal[data-background-transition=linear]>.background div>div.future {
|
||||||
|
-webkit-transform: translate(0, 100%);
|
||||||
|
-moz-transform: translate(0, 100%);
|
||||||
|
-ms-transform: translate(0, 100%);
|
||||||
|
-o-transform: translate(0, 100%);
|
||||||
|
transform: translate(0, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Global transition speed settings */
|
/* Global transition speed settings */
|
||||||
.reveal[data-transition-speed="fast"] .background div {
|
.reveal[data-transition-speed="fast"]>.background div {
|
||||||
-webkit-transition-duration: 400ms;
|
-webkit-transition-duration: 300ms;
|
||||||
-moz-transition-duration: 400ms;
|
-moz-transition-duration: 300ms;
|
||||||
-ms-transition-duration: 400ms;
|
-ms-transition-duration: 300ms;
|
||||||
transition-duration: 400ms;
|
transition-duration: 300ms;
|
||||||
}
|
}
|
||||||
.reveal[data-transition-speed="slow"] .background div {
|
.reveal[data-transition-speed="slow"]>.background div {
|
||||||
-webkit-transition-duration: 1200ms;
|
-webkit-transition-duration: 900ms;
|
||||||
-moz-transition-duration: 1200ms;
|
-moz-transition-duration: 900ms;
|
||||||
-ms-transition-duration: 1200ms;
|
-ms-transition-duration: 900ms;
|
||||||
transition-duration: 1200ms;
|
transition-duration: 900ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
2
css/reveal.min.css
vendored
2
css/reveal.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -79,6 +79,9 @@ var Reveal = (function(){
|
||||||
// Transition speed
|
// Transition speed
|
||||||
transitionSpeed: 'default', // default/fast/slow
|
transitionSpeed: 'default', // default/fast/slow
|
||||||
|
|
||||||
|
// Transition style for full page slide backgrounds
|
||||||
|
backgroundTransition: 'default', // default/linear
|
||||||
|
|
||||||
// Script dependencies to load
|
// Script dependencies to load
|
||||||
dependencies: []
|
dependencies: []
|
||||||
},
|
},
|
||||||
|
|
@ -415,6 +418,7 @@ var Reveal = (function(){
|
||||||
dom.wrapper.classList.add( config.transition );
|
dom.wrapper.classList.add( config.transition );
|
||||||
|
|
||||||
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
|
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
|
||||||
|
dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
|
||||||
|
|
||||||
if( dom.controls ) {
|
if( dom.controls ) {
|
||||||
dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
|
dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
|
||||||
|
|
|
||||||
4
js/reveal.min.js
vendored
4
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -19,11 +19,11 @@
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
|
||||||
<section data-background="#00ffff">
|
<section data-background="#00ffff">
|
||||||
<h2>data-background: #00ff00</h2>
|
<h2>data-background: #00ffff</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-background="#0000ff">
|
<section data-background="#bb00bb">
|
||||||
<h2>data-background: #0000ff</h2>
|
<h2>data-background: #bb00bb</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
@ -74,7 +74,11 @@
|
||||||
controls: true,
|
controls: true,
|
||||||
progress: true,
|
progress: true,
|
||||||
history: true,
|
history: true,
|
||||||
center: true
|
center: true,
|
||||||
|
|
||||||
|
transition: 'linear',
|
||||||
|
// transitionSpeed: 'slow',
|
||||||
|
// backgroundTransition: 'linear'
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue