add parallax horizontal and vertical properties to enable non-calculated parallax offsets
parent
3d2549d4f4
commit
0605ab13df
13
README.md
13
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
|
||||
|
||||
});
|
||||
```
|
||||
|
|
32
js/reveal.js
32
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';
|
||||
|
||||
|
|
Loading…
Reference in New Issue