Added parallax scrolling background

This commit is contained in:
Michał Smoliński 2013-09-10 21:23:10 +02:00
parent 79340908f4
commit 2b5c06c4ef
7 changed files with 119 additions and 5 deletions

View file

@ -108,6 +108,16 @@ Reveal.initialize({
// Transition style for full page backgrounds
backgroundTransition: 'default' // default/linear/none
// Parallax background image
parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
// Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
// Number of slides away from the current that are visible
viewDistance: 3,
});
```
@ -291,6 +301,30 @@ Slides are contained within a limited portion of the screen by default to allow
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.
### Parallax Background
If you want to use the parallax scrolling background, set the two following config properties when initializing reveal.js (the third one is optional )
```javascript
Reveal.initialize({
// Parallax background image
parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
// Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" - currently only pixels are supported (don't use % or auto)
// This slide transition gives best results:
transition: linear
});
```
Make sure that the background size is much bigger than screen size to allow for some scrolling.
The image used in the background is made by Eli Mergel and is published under Creative Commons license on [Flickr](https://secure.flickr.com/photos/sp1te/3436256585/sizes/o/in/pool-856427@N25/).
### Slide Transitions
The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute:

View file

@ -1402,6 +1402,30 @@ body {
float: right
}
/*********************************************
* PARALLAX BACKGROUND
*********************************************/
.reveal[data-parallax-background] {
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
}
/* Global transition speed settings */
.reveal[data-parallax-background][data-transition-speed="fast"] {
-webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration: 400ms;
transition-duration: 400ms;
}
.reveal[data-parallax-background][data-transition-speed="slow"] {
-webkit-transition-duration: 1200ms;
-moz-transition-duration: 1200ms;
-ms-transition-duration: 1200ms;
transition-duration: 1200ms;
}
/*********************************************
* LINK PREVIEW OVERLAY

2
css/reveal.min.css vendored

File diff suppressed because one or more lines are too long

BIN
img/nyc.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

View file

@ -365,6 +365,10 @@ function linkify( selector ) {
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
parallaxBackgroundImage: "url('img/nyc.jpg')",
parallaxBackgroundSize: "3600px 1018px",
// Optional libraries used to extend on reveal.js
dependencies: [

View file

@ -88,6 +88,12 @@ var Reveal = (function(){
// Transition style for full page slide backgrounds
backgroundTransition: 'default', // default/linear/none
// Parallax background image
parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
// Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
// Number of slides away from the current that are visible
viewDistance: 3,
@ -466,6 +472,25 @@ var Reveal = (function(){
} );
} );
// Add parallax background if specified so
var parallaxBackgroundImage = config.parallaxBackgroundImage,
parallaxBackgroundSize = config.parallaxBackgroundSize;
if (parallaxBackgroundImage) {
dom.wrapper.style.background = parallaxBackgroundImage;
dom.wrapper.style.backgroundSize = parallaxBackgroundSize;
// Make sure the below properties are set on the element - these properties are
// needed for proper transitions to be set on the element via CSS. To remove
// annoying background slide-in effect when the presentation starts, apply
// these properties after short time delay
setTimeout( function() {
dom.wrapper.setAttribute('data-parallax-background', parallaxBackgroundImage);
dom.wrapper.setAttribute('data-parallax-background-size', parallaxBackgroundSize);
}, 1 );
}
}
@ -1467,8 +1492,35 @@ var Reveal = (function(){
// Store references to the previous and current slides
currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;
// Animate parallax background
if (dom.wrapper.getAttribute('data-parallax-background') || config.parallaxBackgroundImage) {
var bs = dom.wrapper.style.backgroundSize.split(' '),
bgWidth, bgHeight;
if (bs.length === 1) {
bgWidth = bgHeight = parseInt(bs[0], 10);
} else {
bgWidth = parseInt(bs[0], 10);
bgHeight = parseInt(bs[1], 10);
}
var slideWidth = parseInt(dom.wrapper.offsetWidth, 10);
var horizontalSlideCount = horizontalSlides.length;
var horizontalOffset = -(bgWidth - slideWidth)/(horizontalSlideCount-1) * h;
dom.wrapper.style.backgroundPositionX = horizontalOffset + 'px';
var slideHeight = parseInt(dom.wrapper.offsetHeight, 10);
var verticalSlideCount = currentVerticalSlides.length;
var verticalOffset = verticalSlideCount > 0 ? -(bgHeight - slideHeight)/(verticalSlideCount-1) * v : 0;
dom.wrapper.style.backgroundPositionY = verticalOffset + 'px';
}
////////////////////////////////////
// Show fragment, if specified
if( typeof f !== 'undefined' ) {
var fragments = sortFragments( currentSlide.querySelectorAll( '.fragment' ) );

4
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long