diff --git a/README.md b/README.md index f224e5e..20d2e4c 100644 --- a/README.md +++ b/README.md @@ -164,6 +164,10 @@ Reveal.initialize({ // Parallax background size parallaxBackgroundSize: '' // CSS syntax, e.g. "2100px 900px" + // Amount to move parallax background (horizontal and vertical) on slide change + // Number, e.g. 100 + parallaxBackgroundHorizontal: '', + parallaxBackgroundVertical: '' }); ``` @@ -371,7 +375,7 @@ Backgrounds transition using a fade animation by default. This can be changed to ### Parallax Background -If you want to use a 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 first two config properties below when initializing reveal.js (the other three are optional). ```javascript Reveal.initialize({ @@ -383,7 +387,12 @@ Reveal.initialize({ 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 + transition: linear, + + // Amount to move parallax background (horizontal and vertical) on slide change + // This is optional, if this isn't specified it will be calculated automatically + parallaxBackgroundHorizontal: '', // A number, e.g. 100 + parallaxBackgroundVertical: '' // A number, e.g. 10 }); ``` diff --git a/js/reveal.js b/js/reveal.js index 98d802e..d8dc6bc 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -107,6 +107,10 @@ var Reveal = (function(){ // Parallax background size parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" + // Amount to move parallax background (horizontal and vertical) on slide change + parallaxBackgroundHorizontal: '', // Number, e.g. 100 + parallaxBackgroundVertical: '', // Number, e.g. 10 + // Number of slides away from the current that are visible viewDistance: 3, @@ -2026,13 +2030,29 @@ var Reveal = (function(){ backgroundHeight = parseInt( backgroundSize[1], 10 ); } - var slideWidth = dom.background.offsetWidth; - var horizontalSlideCount = horizontalSlides.length; - var horizontalOffset = -( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) * indexh; + var slideWidth = dom.background.offsetWidth, + horizontalSlideCount = horizontalSlides.length, + horizontalOffsetMultiplier, horizontalOffset; - var slideHeight = dom.background.offsetHeight; - var verticalSlideCount = verticalSlides.length; - var verticalOffset = verticalSlideCount > 0 ? -( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ) * indexv : 0; + if (typeof config.parallaxBackgroundHorizontal === 'number') { + horizontalOffsetMultiplier = config.parallaxBackgroundHorizontal; + } else { + horizontalOffsetMultiplier = ( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ); + } + + horizontalOffset = horizontalOffsetMultiplier * indexh * -1; + + var slideHeight = dom.background.offsetHeight, + verticalSlideCount = verticalSlides.length, + verticalOffsetMultiplier, verticalOffset; + + if (typeof config.parallaxBackgroundVertical === 'number') { + verticalOffsetMultiplier = config.parallaxBackgroundVertical; + } else { + verticalOffsetMultiplier = ( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ); + } + + verticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indexv * -1 : 0; dom.background.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';