xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

linear sliding transition option for full page backgrounds (#453)

Browse Source
This commit is contained in:
Hakim El Hattab
2013-06-04 20:15:19 +02:00
parent c11e8f624f
commit 15f24f7a9a
5 changed files with 69 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
css/reveal.css
View File

@@ -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
View File

File diff suppressed because one or more lines are too long

4
js/reveal.js
View File

@@ -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
View File

File diff suppressed because one or more lines are too long

12
test/background.html
View File

@@ -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>