merge parallax into dev, remove default image #595

README.md

@@ -109,6 +109,16 @@ Reveal.initialize({
 	// Transition style for full page 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,
+
+
 });
 ```
 
@@ -291,6 +301,30 @@ Slides are contained within a limited portion of the screen by default to allow
 
 Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.
 
+### 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 )
+
+```javascript
+Reveal.initialize({
+	
+	// Parallax background image
+	parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
+			
+	// Parallax background size
+	parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" - currently only pixels are supported (don't use % or auto)
+	
+	// This slide transition gives best results:
+	transition: linear
+
+});
+```
+
+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
 The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute:

css/reveal.css

@@ -1402,6 +1402,30 @@ body {
 	float: right
 }
 
+/*********************************************
+ * PARALLAX BACKGROUND
+ *********************************************/
+.reveal[data-parallax-background] {
+	-webkit-transition: all 0.8s ease;
+	   -moz-transition: all 0.8s ease;
+	    -ms-transition: all 0.8s ease;
+	        transition: all 0.8s ease;
+}
+
+/* Global transition speed settings */
+.reveal[data-parallax-background][data-transition-speed="fast"] {
+	-webkit-transition-duration: 400ms;
+	   -moz-transition-duration: 400ms;
+	    -ms-transition-duration: 400ms;
+	        transition-duration: 400ms;
+}
+.reveal[data-parallax-background][data-transition-speed="slow"] {
+	-webkit-transition-duration: 1200ms;
+	   -moz-transition-duration: 1200ms;
+	    -ms-transition-duration: 1200ms;
+	        transition-duration: 1200ms;
+}
+
 
 /*********************************************
  * LINK PREVIEW OVERLAY

index.html

@@ -366,6 +366,10 @@ function linkify( selector ) {
 				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
 				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",
+
 				// Optional libraries used to extend on reveal.js
 				dependencies: [
 					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

js/reveal.js

@@ -92,6 +92,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,
 
@@ -470,6 +476,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 );
+			
+		}
+
 	}
 
 	/**
@@ -1471,7 +1496,31 @@ 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;
+		
+			var slideHeight = parseInt(dom.wrapper.offsetHeight, 10);
+			var verticalSlideCount = currentVerticalSlides.length;
+			var verticalOffset = verticalSlideCount > 0 ? -(bgHeight - slideHeight)/(verticalSlideCount-1) * v : 0;
+		
+			dom.wrapper.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';
+		}
+				
+		////////////////////////////////////
 		// Show fragment, if specified
 		if( typeof f !== 'undefined' ) {
 			var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment' ) );