aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLuke Karrys <lukekarrys@gmail.com>2013-11-29 10:57:26 -0700
committerLuke Karrys <lukekarrys@gmail.com>2013-11-29 11:17:18 -0700
commit0605ab13dfc525fa1498a53833b83a1ad1612fa0 (patch)
tree0c81a9880662868e89a88755ef8000698ead5b7f
parent3d2549d4f461cd2cb21bde6ef8a482f1f27a51ae (diff)
downloadperl-software-in-gnu-guix-0605ab13dfc525fa1498a53833b83a1ad1612fa0.tar
perl-software-in-gnu-guix-0605ab13dfc525fa1498a53833b83a1ad1612fa0.tar.gz
add parallax horizontal and vertical properties to enable non-calculated parallax offsets
-rw-r--r--README.md13
-rw-r--r--js/reveal.js32
2 files changed, 37 insertions, 8 deletions
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;
+
+ 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 );
+ }
- var slideHeight = dom.background.offsetHeight;
- var verticalSlideCount = verticalSlides.length;
- var verticalOffset = verticalSlideCount > 0 ? -( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ) * indexv : 0;
+ verticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indexv * -1 : 0;
dom.background.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';