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

merge options for parallax step size #733

Browse Source
This commit is contained in:
Hakim El Hattab
2015-02-25 12:10:00 +01:00
parent 2ed1d6fb5d 0605ab13df
commit 4c0a033dfa
2 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@@ -175,6 +175,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: ''
});
```
@@ -440,7 +444,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 two are optional).
```javascript
Reveal.initialize({
@@ -451,8 +455,11 @@ Reveal.initialize({
// Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
// This slide transition gives best results:
transition: 'slide'
// Amount of pixels to move the parallax background per slide step,
// a value of 0 disables movement along the given axis
// These are optional, if they aren't specified they'll be calculated automatically
parallaxBackgroundHorizontal: 200,
parallaxBackgroundVertical: 50
});
```

38
js/reveal.js
View File

@@ -136,6 +136,10 @@
// Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
// Amount of pixels to move the parallax background per slide step
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,
// Number of slides away from the current that are visible
viewDistance: 3,
@@ -2672,15 +2676,35 @@
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 > 1 ? -( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ) * indexv : 0;
if( typeof config.parallaxBackgroundHorizontal === 'number' ) {
horizontalOffsetMultiplier = config.parallaxBackgroundHorizontal;
}
else {
horizontalOffsetMultiplier = ( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 );
}
dom.background.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';
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';
}