update code style to match rest of reveal.js, disable parallax by default #595
This commit is contained in:
parent
2fc0dfa8e1
commit
347a907041
5 changed files with 40 additions and 38 deletions
10
README.md
10
README.md
|
@ -108,10 +108,10 @@ Reveal.initialize({
|
||||||
|
|
||||||
// Transition style for full page backgrounds
|
// Transition style for full page backgrounds
|
||||||
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. "url('a.jpg')"
|
||||||
|
|
||||||
// Parallax background size
|
// Parallax background size
|
||||||
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
|
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
|
||||||
|
|
||||||
|
@ -307,13 +307,13 @@ If you want to use the parallax scrolling background, set the two following conf
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
Reveal.initialize({
|
Reveal.initialize({
|
||||||
|
|
||||||
// Parallax background image
|
// Parallax background image
|
||||||
parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.jpg')"
|
parallaxBackgroundImage: '', // CSS syntax, e.g. "url('a.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. "3000px 2000px" - 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
|
||||||
|
|
||||||
|
|
|
@ -1405,6 +1405,7 @@ body {
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PARALLAX BACKGROUND
|
* PARALLAX BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal[data-parallax-background] {
|
.reveal[data-parallax-background] {
|
||||||
-webkit-transition: all 0.8s ease;
|
-webkit-transition: all 0.8s ease;
|
||||||
-moz-transition: all 0.8s ease;
|
-moz-transition: all 0.8s ease;
|
||||||
|
|
|
@ -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: "url('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: [
|
||||||
|
|
59
js/reveal.js
59
js/reveal.js
|
@ -91,10 +91,10 @@ var Reveal = (function(){
|
||||||
|
|
||||||
// Transition style for full page slide backgrounds
|
// Transition style for full page slide backgrounds
|
||||||
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. "url('a.jpg')"
|
||||||
|
|
||||||
// Parallax background size
|
// Parallax background size
|
||||||
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
|
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
|
||||||
|
|
||||||
|
@ -475,24 +475,24 @@ var Reveal = (function(){
|
||||||
} );
|
} );
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Add parallax background if specified so
|
// Add parallax background if specified so
|
||||||
var parallaxBackgroundImage = config.parallaxBackgroundImage,
|
var parallaxBackgroundImage = config.parallaxBackgroundImage,
|
||||||
parallaxBackgroundSize = config.parallaxBackgroundSize;
|
parallaxBackgroundSize = config.parallaxBackgroundSize;
|
||||||
|
|
||||||
if (parallaxBackgroundImage) {
|
if( parallaxBackgroundImage ) {
|
||||||
dom.wrapper.style.background = parallaxBackgroundImage;
|
dom.wrapper.style.background = parallaxBackgroundImage;
|
||||||
dom.wrapper.style.backgroundSize = 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.setAttribute( 'data-parallax-background', parallaxBackgroundImage );
|
||||||
dom.wrapper.setAttribute('data-parallax-background-size', parallaxBackgroundSize);
|
dom.wrapper.setAttribute( 'data-parallax-background-size', parallaxBackgroundSize );
|
||||||
}, 1 );
|
}, 1 );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1495,31 +1495,32 @@ var Reveal = (function(){
|
||||||
|
|
||||||
// Store references to the previous and current slides
|
// Store references to the previous and current slides
|
||||||
currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;
|
currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;
|
||||||
|
|
||||||
// Animate parallax background
|
// Animate parallax background
|
||||||
if (dom.wrapper.getAttribute('data-parallax-background') || config.parallaxBackgroundImage) {
|
if( dom.wrapper.getAttribute( 'data-parallax-background' ) || config.parallaxBackgroundImage ) {
|
||||||
var bs = dom.wrapper.style.backgroundSize.split(' '),
|
var bs = dom.wrapper.style.backgroundSize.split( ' ' ),
|
||||||
bgWidth, bgHeight;
|
bgWidth, bgHeight;
|
||||||
|
|
||||||
if (bs.length === 1) {
|
if( bs.length === 1 ) {
|
||||||
bgWidth = bgHeight = parseInt(bs[0], 10);
|
bgWidth = bgHeight = parseInt( bs[0], 10 );
|
||||||
} else {
|
|
||||||
bgWidth = parseInt(bs[0], 10);
|
|
||||||
bgHeight = parseInt(bs[1], 10);
|
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
bgWidth = parseInt( bs[0], 10 );
|
||||||
var slideWidth = parseInt(dom.wrapper.offsetWidth, 10);
|
bgHeight = parseInt( bs[1], 10 );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var slideWidth = dom.wrapper.offsetWidth;
|
||||||
var horizontalSlideCount = horizontalSlides.length;
|
var horizontalSlideCount = horizontalSlides.length;
|
||||||
var horizontalOffset = -(bgWidth - slideWidth)/(horizontalSlideCount-1) * h;
|
var horizontalOffset = -( bgWidth - slideWidth ) / ( horizontalSlideCount-1 ) * h;
|
||||||
|
|
||||||
var slideHeight = parseInt(dom.wrapper.offsetHeight, 10);
|
var slideHeight = dom.wrapper.offsetHeight;
|
||||||
var verticalSlideCount = currentVerticalSlides.length;
|
var verticalSlideCount = currentVerticalSlides.length;
|
||||||
var verticalOffset = verticalSlideCount > 0 ? -(bgHeight - slideHeight)/(verticalSlideCount-1) * v : 0;
|
var verticalOffset = verticalSlideCount > 0 ? -( bgHeight - slideHeight ) / ( verticalSlideCount-1 ) * v : 0;
|
||||||
|
|
||||||
dom.wrapper.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';
|
dom.wrapper.style.backgroundPosition = horizontalOffset + 'px ' + verticalOffset + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
////////////////////////////////////
|
////////////////////////////////////
|
||||||
// Show fragment, if specified
|
// Show fragment, if specified
|
||||||
if( typeof f !== 'undefined' ) {
|
if( typeof f !== 'undefined' ) {
|
||||||
|
@ -1874,12 +1875,12 @@ var Reveal = (function(){
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Updates the background elements to reflect the current
|
* Updates the background elements to reflect the current
|
||||||
* slide.
|
* slide.
|
||||||
*/
|
*/
|
||||||
function updateBackground() {
|
function updateBackground() {
|
||||||
|
|
||||||
// Update the classes of all backgrounds to match the
|
// Update the classes of all backgrounds to match the
|
||||||
// states of their slides (past/present/future)
|
// states of their slides (past/present/future)
|
||||||
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
|
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
|
||||||
|
|
||||||
|
|
4
js/reveal.min.js
vendored
4
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue