use 'url()'-free path when specifying parallax image, refactor so that parallax is applied to background class, remove unused attributes #595

edit
Hakim El Hattab 2013-09-15 17:45:27 -04:00
parent 36061b43ba
commit 86216ac645
6 changed files with 30 additions and 30 deletions

View File

@ -110,10 +110,10 @@ Reveal.initialize({
backgroundTransition: 'default' // default/linear/none backgroundTransition: 'default' // default/linear/none
// Parallax background image // Parallax background image
parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')" parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
// Parallax background size // Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
// Number of slides away from the current that are visible // Number of slides away from the current that are visible
viewDistance: 3, viewDistance: 3,
@ -303,16 +303,16 @@ Backgrounds transition using a fade animation by default. This can be changed to
### Parallax Background ### 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 ) If you want to use a parallax scrolling background, set the two following config properties when initializing reveal.js (the third one is optional).
```javascript ```javascript
Reveal.initialize({ Reveal.initialize({
// Parallax background image // Parallax background image
parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')" parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"
// Parallax background size // Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" - 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
@ -322,8 +322,6 @@ Reveal.initialize({
Make sure that the background size is much bigger than screen size to allow for some scrolling. 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 ### Slide Transitions

View File

@ -1406,7 +1406,7 @@ body {
* PARALLAX BACKGROUND * PARALLAX BACKGROUND
*********************************************/ *********************************************/
.reveal[data-parallax-background] { .reveal.has-parallax-background .backgrounds {
-webkit-transition: all 0.8s ease; -webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease; -moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease; -ms-transition: all 0.8s ease;
@ -1414,13 +1414,13 @@ body {
} }
/* Global transition speed settings */ /* Global transition speed settings */
.reveal[data-parallax-background][data-transition-speed="fast"] { .reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
-webkit-transition-duration: 400ms; -webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms; -moz-transition-duration: 400ms;
-ms-transition-duration: 400ms; -ms-transition-duration: 400ms;
transition-duration: 400ms; transition-duration: 400ms;
} }
.reveal[data-parallax-background][data-transition-speed="slow"] { .reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
-webkit-transition-duration: 1200ms; -webkit-transition-duration: 1200ms;
-moz-transition-duration: 1200ms; -moz-transition-duration: 1200ms;
-ms-transition-duration: 1200ms; -ms-transition-duration: 1200ms;

2
css/reveal.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -367,8 +367,8 @@ function linkify( selector ) {
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling // Parallax scrolling
// parallaxBackgroundImage: "url('https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg')", // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: "2100px 900px", // parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js // Optional libraries used to extend on reveal.js
dependencies: [ dependencies: [

View File

@ -93,7 +93,7 @@ var Reveal = (function(){
backgroundTransition: 'default', // default/linear/none backgroundTransition: 'default', // default/linear/none
// Parallax background image // Parallax background image
parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')" parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"
// Parallax background size // Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
@ -476,24 +476,27 @@ var Reveal = (function(){
} ); } );
// Add parallax background if specified so // Add parallax background if specified
var parallaxBackgroundImage = config.parallaxBackgroundImage, if( config.parallaxBackgroundImage ) {
parallaxBackgroundSize = config.parallaxBackgroundSize;
if( parallaxBackgroundImage ) { dom.background.style.backgroundImage = 'url("' + config.parallaxBackgroundImage + '")';
dom.wrapper.style.background = parallaxBackgroundImage; dom.background.style.backgroundSize = config.parallaxBackgroundSize;
dom.wrapper.style.backgroundSize = parallaxBackgroundSize;
// Make sure the below properties are set on the element - these properties are // 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 // needed for proper transitions to be set on the element via CSS. To remove
// annoying background slide-in effect when the presentation starts, apply // annoying background slide-in effect when the presentation starts, apply
// these properties after short time delay // these properties after short time delay
setTimeout( function() { setTimeout( function() {
dom.wrapper.setAttribute( 'data-parallax-background', parallaxBackgroundImage ); dom.wrapper.classList.add( 'has-parallax-background' );
dom.wrapper.setAttribute( 'data-parallax-background-size', parallaxBackgroundSize );
}, 1 ); }, 1 );
} }
else {
dom.background.style.backgroundImage = '';
dom.wrapper.classList.remove( 'has-parallax-background' );
}
} }
@ -1888,13 +1891,12 @@ var Reveal = (function(){
*/ */
function updateParallax() { function updateParallax() {
// Animate parallax background if( config.parallaxBackgroundImage ) {
if( dom.wrapper.getAttribute( 'data-parallax-background' ) || config.parallaxBackgroundImage ) {
var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), var horizontalSlides = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR ); verticalSlides = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
var backgroundSize = dom.wrapper.style.backgroundSize.split( ' ' ), var backgroundSize = dom.background.style.backgroundSize.split( ' ' ),
backgroundWidth, backgroundHeight; backgroundWidth, backgroundHeight;
if( backgroundSize.length === 1 ) { if( backgroundSize.length === 1 ) {
@ -1905,15 +1907,15 @@ var Reveal = (function(){
backgroundHeight = parseInt( backgroundSize[1], 10 ); backgroundHeight = parseInt( backgroundSize[1], 10 );
} }
var slideWidth = dom.wrapper.offsetWidth; var slideWidth = dom.background.offsetWidth;
var horizontalSlideCount = horizontalSlides.length; var horizontalSlideCount = horizontalSlides.length;
var horizontalOffset = -( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) * indexh; var horizontalOffset = -( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) * indexh;
var slideHeight = dom.wrapper.offsetHeight; var slideHeight = dom.background.offsetHeight;
var verticalSlideCount = verticalSlides.length; var verticalSlideCount = verticalSlides.length;
var verticalOffset = verticalSlideCount > 0 ? -( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ) * indexv : 0; var verticalOffset = verticalSlideCount > 0 ? -( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 ) * indexv : 0;
dom.wrapper.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px'; dom.background.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';
} }

4
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long