Added parallax scrolling background

1 files changed, 54 insertions, 2 deletions

diff --git a/js/reveal.js b/js/reveal.js
index e1cd623..6562e65 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -88,6 +88,12 @@ var Reveal = (function(){
 
 			// Transition style for full page slide backgrounds
 			backgroundTransition: 'default', // default/linear/none
+			
+			// Parallax background image
+			parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
+			
+			// Parallax background size
+			parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
 
 			// Number of slides away from the current that are visible
 			viewDistance: 3,
@@ -466,6 +472,25 @@ var Reveal = (function(){
 			} );
 
 		} );
+		
+		// Add parallax background if specified so
+		var parallaxBackgroundImage = config.parallaxBackgroundImage,
+			parallaxBackgroundSize = config.parallaxBackgroundSize;
+		
+		if (parallaxBackgroundImage) {
+			dom.wrapper.style.background = parallaxBackgroundImage;
+			dom.wrapper.style.backgroundSize = 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);
+			}, 1 );
+			
+		}
 
 	}
 
@@ -1467,8 +1492,35 @@ var Reveal = (function(){
 
 		// Store references to the previous and current slides
 		currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;
-
-
+		
+		// Animate parallax background
+		if (dom.wrapper.getAttribute('data-parallax-background') || config.parallaxBackgroundImage) {
+			var bs = dom.wrapper.style.backgroundSize.split(' '),
+				bgWidth, bgHeight;
+		
+			if (bs.length === 1) {
+				bgWidth = bgHeight = parseInt(bs[0], 10);
+			} else {
+				bgWidth = parseInt(bs[0], 10);
+				bgHeight = parseInt(bs[1], 10);
+			}
+			
+		
+			var slideWidth = parseInt(dom.wrapper.offsetWidth, 10);
+			var horizontalSlideCount = horizontalSlides.length;
+			var horizontalOffset = -(bgWidth - slideWidth)/(horizontalSlideCount-1) * h;
+		
+			dom.wrapper.style.backgroundPositionX = horizontalOffset + 'px';
+		
+		
+			var slideHeight = parseInt(dom.wrapper.offsetHeight, 10);
+			var verticalSlideCount = currentVerticalSlides.length;
+			var verticalOffset = verticalSlideCount > 0 ? -(bgHeight - slideHeight)/(verticalSlideCount-1) * v : 0;
+		
+			dom.wrapper.style.backgroundPositionY = verticalOffset + 'px';
+		}
+				
+		////////////////////////////////////
 		// Show fragment, if specified
 		if( typeof f !== 'undefined' ) {
 			var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment' ) );