Browse Source

started the new per-slide background implementation (#453)

embed
Hakim El Hattab 12 years ago
parent
commit
f3f5d7780a
  1. 50
      css/reveal.css
  2. 2
      css/reveal.min.css
  3. 87
      js/reveal.js
  4. 4
      js/reveal.min.js

50
css/reveal.css

@ -1255,7 +1255,7 @@ body {
/*********************************************
* BACKGROUND STATES
* BACKGROUND STATES [DEPRECATED]
*********************************************/
.reveal .state-background {
@ -1299,6 +1299,54 @@ body {
}
/*********************************************
*
*********************************************/
.reveal>.background {
position: absolute;
width: 100%;
height: 100%;
}
.reveal>.background div {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background-color: rgba( 0, 0, 0, 0 );
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
.reveal>.background div.present {
opacity: 1;
visibility: visible;
}
/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .background div {
-webkit-transition-duration: 400ms;
-moz-transition-duration: 400ms;
-ms-transition-duration: 400ms;
transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"] .background div {
-webkit-transition-duration: 1200ms;
-moz-transition-duration: 1200ms;
-ms-transition-duration: 1200ms;
transition-duration: 1200ms;
}
/*********************************************
* RTL SUPPORT
*********************************************/

2
css/reveal.min.css

File diff suppressed because one or more lines are too long

87
js/reveal.js

@ -186,6 +186,13 @@ var Reveal = (function(){
dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' );
// Background element
if( !document.querySelector( '.reveal .background' ) ) {
dom.background = document.createElement( 'div' );
dom.background.classList.add( 'background' );
dom.wrapper.appendChild( dom.background );
}
// Progress bar
if( !dom.wrapper.querySelector( '.progress' ) ) {
var progressElement = document.createElement( 'div' );
@ -205,11 +212,11 @@ var Reveal = (function(){
dom.wrapper.appendChild( controlsElement );
}
// Presentation background element
// State background element [DEPRECATED]
if( !dom.wrapper.querySelector( '.state-background' ) ) {
var backgroundElement = document.createElement( 'div' );
backgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( backgroundElement );
var stateBackgroundElement = document.createElement( 'div' );
stateBackgroundElement.classList.add( 'state-background' );
dom.wrapper.appendChild( stateBackgroundElement );
}
// Overlay graphic which is displayed during the paused mode
@ -237,6 +244,54 @@ var Reveal = (function(){
}
/**
* Creates the slide background elements and appends them
* to the background container.
*/
function createBackgrounds() {
// Clear prior backgrounds
dom.background.innerHTML = '';
// Helper method for creating a background element for the
// given slide
function _createBackground( slide, container ) {
var background = slide.getAttribute( 'data-background' );
var element = document.createElement( 'div' );
if( background ) {
// Auto-wrap image urls in url(...)
if( /\.(png|jpg|jpeg|gif|bmp|)$/gi.test( background ) ) {
element.style.backgroundImage = 'url('+ background +')';
}
else {
element.style.background = background;
}
}
container.appendChild( element );
return element;
}
// Iterate over all horizontal slides
toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
var backgroundStack = _createBackground( slideh, dom.background );
// Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
_createBackground( slidev, backgroundStack );
} );
} );
}
/**
* Hides the address bar if we're on a mobile device.
*/
@ -1173,6 +1228,7 @@ var Reveal = (function(){
updateControls();
updateProgress();
updateBackground();
}
@ -1196,8 +1252,12 @@ var Reveal = (function(){
// Start auto-sliding if it's enabled
cueAutoSlide();
// Re-create the slide backgrounds
createBackgrounds();
updateControls();
updateProgress();
updateBackground();
}
@ -1402,6 +1462,25 @@ var Reveal = (function(){
}
/**
*
*/
function updateBackground() {
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
backgroundh.className = ( h < indexh ? 'past' : h > indexh ? 'future' : 'present' );
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
backgroundv.className = ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
} );
} );
}
/**
* Determine what available routes there are for navigation.
*

4
js/reveal.min.js

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save