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

css/reveal.css

@@ -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;
 
-/* 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;
+	-webkit-backface-visibility: hidden;
+	   -moz-backface-visibility: hidden;
+	    -ms-backface-visibility: hidden;
+	        backface-visibility: hidden;
 }
-.reveal[data-transition-speed="slow"] .background div {
-	-webkit-transition-duration: 1200ms;
-	   -moz-transition-duration: 1200ms;
-	    -ms-transition-duration: 1200ms;
-	        transition-duration: 1200ms;
+	.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: 300ms;
+	   -moz-transition-duration: 300ms;
+	    -ms-transition-duration: 300ms;
+	        transition-duration: 300ms;
+}
+.reveal[data-transition-speed="slow"]>.background div {
+	-webkit-transition-duration: 900ms;
+	   -moz-transition-duration: 900ms;
+	    -ms-transition-duration: 900ms;
+	        transition-duration: 900ms;
 }
 
 

js/reveal.js

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

test/background.html

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