use 'url()'-free path when specifying parallax image, refactor so that parallax is applied to background class, remove unused attributes #595

README.md

@@ -110,10 +110,10 @@ Reveal.initialize({
 	backgroundTransition: 'default' // default/linear/none
 
 	// Parallax background image
-	parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
+	parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
 
 	// Parallax background size
-	parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
+	parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
 
 	// Number of slides away from the current that are visible
 	viewDistance: 3,
@@ -303,16 +303,16 @@ Backgrounds transition using a fade animation by default. This can be changed to
 
 ### Parallax Background
 
-If you want to use the parallax scrolling background, set the two following config properties when initializing reveal.js (the third one is optional )
+If you want to use a parallax scrolling background, set the two following config properties when initializing reveal.js (the third one is optional).
 
 ```javascript
 Reveal.initialize({
 
 	// Parallax background image
-	parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
+	parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"
 
 	// Parallax background size
-	parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" - 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:
 	transition: linear
@@ -322,8 +322,6 @@ Reveal.initialize({
 
 Make sure that the background size is much bigger than screen size to allow for some scrolling.
 
-The image used in the background is made by Eli Mergel and is published under Creative Commons license on [Flickr](https://secure.flickr.com/photos/sp1te/3436256585/sizes/o/in/pool-856427@N25/).
-
 
 
 ### Slide Transitions

css/reveal.css

@@ -1406,7 +1406,7 @@ body {
  * PARALLAX BACKGROUND
  *********************************************/
 
-.reveal[data-parallax-background] {
+.reveal.has-parallax-background .backgrounds {
 	-webkit-transition: all 0.8s ease;
 	   -moz-transition: all 0.8s ease;
 	    -ms-transition: all 0.8s ease;
@@ -1414,13 +1414,13 @@ body {
 }
 
 /* Global transition speed settings */
-.reveal[data-parallax-background][data-transition-speed="fast"] {
+.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
 	-webkit-transition-duration: 400ms;
 	   -moz-transition-duration: 400ms;
 	    -ms-transition-duration: 400ms;
 	        transition-duration: 400ms;
 }
-.reveal[data-parallax-background][data-transition-speed="slow"] {
+.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
 	-webkit-transition-duration: 1200ms;
 	   -moz-transition-duration: 1200ms;
 	    -ms-transition-duration: 1200ms;

index.html

@@ -367,8 +367,8 @@ function linkify( selector ) {
 				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
 
 				// Parallax scrolling
-				// parallaxBackgroundImage: "url('https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg')",
-				// parallaxBackgroundSize: "2100px 900px",
+				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
+				// parallaxBackgroundSize: '2100px 900px',
 
 				// Optional libraries used to extend on reveal.js
 				dependencies: [

js/reveal.js

@@ -93,7 +93,7 @@ var Reveal = (function(){
 			backgroundTransition: 'default', // default/linear/none
 
 			// Parallax background image
-			parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
+			parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"
 
 			// Parallax background size
 			parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
@@ -476,24 +476,27 @@ var Reveal = (function(){
 
 		} );
 
-		// Add parallax background if specified so
-		var parallaxBackgroundImage = config.parallaxBackgroundImage,
-			parallaxBackgroundSize = config.parallaxBackgroundSize;
+		// Add parallax background if specified
+		if( config.parallaxBackgroundImage ) {
 
-		if( parallaxBackgroundImage ) {
-			dom.wrapper.style.background = parallaxBackgroundImage;
-			dom.wrapper.style.backgroundSize = parallaxBackgroundSize;
+			dom.background.style.backgroundImage = 'url("' + config.parallaxBackgroundImage + '")';
+			dom.background.style.backgroundSize = config.parallaxBackgroundSize;
 
 			// Make sure the below properties are set on the element - these properties are
 			// needed for proper transitions to be set on the element via CSS. To remove
 			// annoying background slide-in effect when the presentation starts, apply
 			// these properties after short time delay
 			setTimeout( function() {
-				dom.wrapper.setAttribute( 'data-parallax-background', parallaxBackgroundImage );
-				dom.wrapper.setAttribute( 'data-parallax-background-size', parallaxBackgroundSize );
+				dom.wrapper.classList.add( 'has-parallax-background' );
 			}, 1 );
 
 		}
+		else {
+
+			dom.background.style.backgroundImage = '';
+			dom.wrapper.classList.remove( 'has-parallax-background' );
+
+		}
 
 	}
 
@@ -1888,13 +1891,12 @@ var Reveal = (function(){
 	 */
 	function updateParallax() {
 
-		// Animate parallax background
-		if( dom.wrapper.getAttribute( 'data-parallax-background' ) || config.parallaxBackgroundImage ) {
+		if( config.parallaxBackgroundImage ) {
 
 			var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
 				verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
 
-			var backgroundSize = dom.wrapper.style.backgroundSize.split( ' ' ),
+			var backgroundSize = dom.background.style.backgroundSize.split( ' ' ),
 				backgroundWidth, backgroundHeight;
 
 			if( backgroundSize.length === 1 ) {
@@ -1905,15 +1907,15 @@ var Reveal = (function(){
 				backgroundHeight = parseInt( backgroundSize[1], 10 );
 			}
 
-			var slideWidth = dom.wrapper.offsetWidth;
+			var slideWidth = dom.background.offsetWidth;
 			var horizontalSlideCount = horizontalSlides.length;
 			var horizontalOffset = -( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) * indexh;
 
-			var slideHeight = dom.wrapper.offsetHeight;
+			var slideHeight = dom.background.offsetHeight;
 			var verticalSlideCount = verticalSlides.length;
 			var verticalOffset = verticalSlideCount > 0 ? -( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ) * indexv : 0;
 
-			dom.wrapper.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';
+			dom.background.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';
 
 		}