phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects 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
Show Stats 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-size: cover;
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
-webkit-transition: all 650ms ease;
-moz-transition: all 650ms ease;
-ms-transition: all 650ms ease;
-o-transition: all 650ms ease;
transition: all 650ms ease;
}
.reveal>.background div.present {
opacity: 1;
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 */
.reveal[data-transition-speed="fast"] .background div {
-webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration: 400ms;
transition-duration: 400ms;
.reveal[data-transition-speed="fast"]>.background div {
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
transition-duration: 300ms;
}
.reveal[data-transition-speed="slow"] .background div {
-webkit-transition-duration: 1200ms;
-moz-transition-duration: 1200ms;
-ms-transition-duration: 1200ms;
transition-duration: 1200ms;
.reveal[data-transition-speed="slow"]>.background div {
-webkit-transition-duration: 900ms;
-moz-transition-duration: 900ms;
-ms-transition-duration: 900ms;
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
transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/linear
// Script dependencies to load
dependencies: []
},
@ -415,6 +418,7 @@ var Reveal = (function(){
dom.wrapper.classList.add( config.transition );
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
dom.wrapper.setAttribute( 'data-background-transition', config.backgroundTransition );
if( dom.controls ) {
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">
<section data-background="#00ffff">
<h2>data-background: #00ff00</h2>
<h2>data-background: #00ffff</h2>
</section>
<section data-background="#0000ff">
<h2>data-background: #0000ff</h2>
<section data-background="#bb00bb">
<h2>data-background: #bb00bb</h2>
</section>
<section>
@ -74,7 +74,11 @@
controls: true,
progress: true,
history: true,
center: true
center: true,
transition: 'linear',
// transitionSpeed: 'slow',
// backgroundTransition: 'linear'
});
</script>