xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add parallax horizontal and vertical properties to enable non-calculated parallax offsets

Browse Source
This commit is contained in:
Luke Karrys
2013-11-29 10:57:26 -07:00
parent 3d2549d4f4
commit 0605ab13df
2 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@@ -164,6 +164,10 @@ Reveal.initialize({
// Parallax background size // Parallax background size
parallaxBackgroundSize: '' // CSS syntax, e.g. "2100px 900px" 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 ### 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 ```javascript
Reveal.initialize({ 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) parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
// This slide transition gives best results: // 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
}); });
``` ```

32
js/reveal.js
View File

@@ -107,6 +107,10 @@ var Reveal = (function(){
// Parallax background size // Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" 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 // Number of slides away from the current that are visible
viewDistance: 3, viewDistance: 3,
@@ -2026,13 +2030,29 @@ var Reveal = (function(){
backgroundHeight = parseInt( backgroundSize[1], 10 ); backgroundHeight = parseInt( backgroundSize[1], 10 );
} }
var slideWidth = dom.background.offsetWidth; var slideWidth = dom.background.offsetWidth,
var horizontalSlideCount = horizontalSlides.length; horizontalSlideCount = horizontalSlides.length,
var horizontalOffset = -( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) * indexh; horizontalOffsetMultiplier, horizontalOffset;
var slideHeight = dom.background.offsetHeight; if (typeof config.parallaxBackgroundHorizontal === 'number') {
var verticalSlideCount = verticalSlides.length; horizontalOffsetMultiplier = config.parallaxBackgroundHorizontal;
var verticalOffset = verticalSlideCount > 0 ? -( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ) * indexv : 0; } 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'; dom.background.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';