From a61a372b5215fbdf1fa3bab5a4c21ca511bfbe07 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 16 Oct 2014 12:19:20 +0200 Subject: use nesting for fragment styles --- css/reveal.scss | 54 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 31 insertions(+), 23 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.scss b/css/reveal.scss index 0d1fb82..b07643b 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -78,69 +78,84 @@ body { opacity: 0; visibility: hidden; transition: all .2s ease; -} - .reveal .slides section .fragment.visible { + + &.visible { opacity: 1; visibility: visible; } +} .reveal .slides section .fragment.grow { opacity: 1; visibility: visible; -} - .reveal .slides section .fragment.grow.visible { + + &.visible { transform: scale( 1.3 ); } +} .reveal .slides section .fragment.shrink { opacity: 1; visibility: visible; -} - .reveal .slides section .fragment.shrink.visible { + + &.visible { transform: scale( 0.7 ); } +} .reveal .slides section .fragment.zoom-in { transform: scale( 0.1 ); -} - .reveal .slides section .fragment.zoom-in.visible { + &.visible { transform: scale( 1 ); } +} .reveal .slides section .fragment.roll-in { transform: rotateX( 90deg ); -} - .reveal .slides section .fragment.roll-in.visible { + + &.visible { transform: rotateX( 0 ); } +} .reveal .slides section .fragment.fade-out { opacity: 1; visibility: visible; -} - .reveal .slides section .fragment.fade-out.visible { + + &.visible { opacity: 0; visibility: hidden; } +} .reveal .slides section .fragment.semi-fade-out { opacity: 1; visibility: visible; -} - .reveal .slides section .fragment.semi-fade-out.visible { + + &.visible { opacity: 0.5; visibility: visible; } +} + +.reveal .slides section .fragment.strike { + opacity: 1; + + &.visible { + text-decoration: line-through; + } +} .reveal .slides section .fragment.current-visible { opacity: 0; visibility: hidden; -} - .reveal .slides section .fragment.current-visible.current-fragment { + + &.current-fragment { opacity: 1; visibility: visible; } +} .reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-current-red, @@ -171,13 +186,6 @@ body { color: #1b91ff; } -.reveal .slides section .fragment.strike { - opacity: 1; -} - .reveal .slides section .fragment.strike.visible { - text-decoration: line-through; - } - /********************************************* * DEFAULT ELEMENT STYLES -- cgit v1.2.3 From 1f5369a43ec9d690298c633fcb6c0d595bb1ca04 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 16 Oct 2014 13:35:47 +0200 Subject: correct defaults for min-height, thanks @sebastianz #985 --- css/reveal.css | 6 +++--- css/reveal.scss | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index ed380ab..50432e4 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -340,7 +340,7 @@ body { opacity: 1; } .reveal.center, .reveal.center .slides, .reveal.center .slides section { - min-height: auto !important; } + min-height: 0 !important; } /* Don't allow interaction with invisible slides */ .reveal .slides > section.future, .reveal .slides > section > section.future, .reveal .slides > section.past, .reveal .slides > section > section.past { @@ -464,7 +464,7 @@ body { box-sizing: border-box; } .reveal.center.cube .slides section { - min-height: auto; } + min-height: 0; } .reveal.cube .slides section:not(.stack):before { content: ''; @@ -714,7 +714,7 @@ body { opacity: 1 !important; position: relative !important; height: auto; - min-height: auto; + min-height: 0; top: 0; left: -50%; margin: 70px 0; diff --git a/css/reveal.scss b/css/reveal.scss index b07643b..7f07b46 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -423,7 +423,7 @@ body { .reveal.center, .reveal.center .slides, .reveal.center .slides section { - min-height: auto !important; + min-height: 0 !important; } /* Don't allow interaction with invisible slides */ @@ -584,7 +584,7 @@ body { box-sizing: border-box; } .reveal.center.cube .slides section { - min-height: auto; + min-height: 0; } .reveal.cube .slides section:not(.stack):before { content: ''; @@ -837,7 +837,7 @@ body { opacity: 1 !important; position: relative !important; height: auto; - min-height: auto; + min-height: 0; top: 0; left: -50%; margin: 70px 0; -- cgit v1.2.3 From 2cfe1174f1359b5a4378b003ca032b4929f02ba3 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 27 Dec 2014 21:22:17 +0100 Subject: kill unintended transition into overview mode --- css/reveal.css | 2 -- css/reveal.scss | 1 - 2 files changed, 3 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 50432e4..633fcd2 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -290,8 +290,6 @@ body { overflow: visible; z-index: 1; text-align: center; - -webkit-transition: -webkit-perspective 0.4s ease; - transition: perspective 0.4s ease; -webkit-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 40%; diff --git a/css/reveal.scss b/css/reveal.scss index 7f07b46..41cc71a 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -368,7 +368,6 @@ body { overflow: visible; z-index: 1; text-align: center; - transition: perspective .4s ease; perspective: 600px; perspective-origin: 50% 40%; } -- cgit v1.2.3 From 5bdbc2dc7b4c957f6df6540bdccc29e00c2e49a3 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 27 Dec 2014 21:27:53 +0100 Subject: remove deprecated data-state background colors --- css/reveal.css | 38 -------------------------------------- css/reveal.scss | 40 ---------------------------------------- js/reveal.js | 3 --- 3 files changed, 81 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 633fcd2..43acebb 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -727,44 +727,6 @@ body { -webkit-transition: none !important; transition: none !important; } -/********************************************* - * BACKGROUND STATES [DEPRECATED] - *********************************************/ -.reveal .state-background { - position: absolute; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0); - -webkit-transition: background 800ms ease; - transition: background 800ms ease; } - -.alert .reveal .state-background { - background: rgba(200, 50, 30, 0.6); } - -.soothe .reveal .state-background { - background: rgba(50, 200, 90, 0.4); } - -.blackout .reveal .state-background { - background: rgba(0, 0, 0, 0.6); } - -.whiteout .reveal .state-background { - background: rgba(255, 255, 255, 0.6); } - -.cobalt .reveal .state-background { - background: rgba(22, 152, 213, 0.6); } - -.mint .reveal .state-background { - background: rgba(22, 213, 75, 0.6); } - -.submerge .reveal .state-background { - background: rgba(12, 25, 77, 0.6); } - -.lila .reveal .state-background { - background: rgba(180, 50, 140, 0.6); } - -.sunset .reveal .state-background { - background: rgba(255, 122, 0, 0.6); } - /********************************************* * PER-SLIDE BACKGROUNDS *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 41cc71a..b731c9b 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -853,46 +853,6 @@ body { } -/********************************************* - * BACKGROUND STATES [DEPRECATED] - *********************************************/ - -.reveal .state-background { - position: absolute; - width: 100%; - height: 100%; - background: rgba( 0, 0, 0, 0 ); - transition: background 800ms ease; -} -.alert .reveal .state-background { - background: rgba( 200, 50, 30, 0.6 ); -} -.soothe .reveal .state-background { - background: rgba( 50, 200, 90, 0.4 ); -} -.blackout .reveal .state-background { - background: rgba( 0, 0, 0, 0.6 ); -} -.whiteout .reveal .state-background { - background: rgba( 255, 255, 255, 0.6 ); -} -.cobalt .reveal .state-background { - background: rgba( 22, 152, 213, 0.6 ); -} -.mint .reveal .state-background { - background: rgba( 22, 213, 75, 0.6 ); -} -.submerge .reveal .state-background { - background: rgba( 12, 25, 77, 0.6); -} -.lila .reveal .state-background { - background: rgba( 180, 50, 140, 0.6 ); -} -.sunset .reveal .state-background { - background: rgba( 255, 122, 0, 0.6 ); -} - - /********************************************* * PER-SLIDE BACKGROUNDS *********************************************/ diff --git a/js/reveal.js b/js/reveal.js index c8aa84a..224ce99 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -443,9 +443,6 @@ // Slide number dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); - // State background element [DEPRECATED] - createSingletonNode( dom.wrapper, 'div', 'state-background', null ); - // Overlay graphic which is displayed during the paused mode createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null ); -- cgit v1.2.3 From 9c3a7b49d0c9f39d6f65b9af4a90a5c3ff782343 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 5 Jan 2015 09:40:53 +0100 Subject: (c) 2015 --- Gruntfile.js | 2 +- LICENSE | 2 +- README.md | 2 +- css/reveal.css | 2 +- css/reveal.scss | 2 +- js/reveal.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) (limited to 'css/reveal.scss') diff --git a/Gruntfile.js b/Gruntfile.js index 97976e4..3e67b9f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -11,7 +11,7 @@ module.exports = function(grunt) { ' * http://lab.hakim.se/reveal-js\n' + ' * MIT licensed\n' + ' *\n' + - ' * Copyright (C) 2014 Hakim El Hattab, http://hakim.se\n' + + ' * Copyright (C) 2015 Hakim El Hattab, http://hakim.se\n' + ' */' }, diff --git a/LICENSE b/LICENSE index 3866d13..0962307 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright (C) 2014 Hakim El Hattab, http://hakim.se +Copyright (C) 2015 Hakim El Hattab, http://hakim.se Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 388b4fb..b15f7d5 100644 --- a/README.md +++ b/README.md @@ -947,4 +947,4 @@ Some reveal.js features, like external Markdown and speaker notes, require that MIT licensed -Copyright (C) 2014 Hakim El Hattab, http://hakim.se +Copyright (C) 2015 Hakim El Hattab, http://hakim.se diff --git a/css/reveal.css b/css/reveal.css index 43acebb..05bfd2d 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -3,7 +3,7 @@ * http://lab.hakim.se/reveal-js * MIT licensed * - * Copyright (C) 2014 Hakim El Hattab, http://hakim.se + * Copyright (C) 2015 Hakim El Hattab, http://hakim.se */ /********************************************* * RESET STYLES diff --git a/css/reveal.scss b/css/reveal.scss index b731c9b..6cc21ba 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -3,7 +3,7 @@ * http://lab.hakim.se/reveal-js * MIT licensed * - * Copyright (C) 2014 Hakim El Hattab, http://hakim.se + * Copyright (C) 2015 Hakim El Hattab, http://hakim.se */ diff --git a/js/reveal.js b/js/reveal.js index 224ce99..4f44c5f 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3,7 +3,7 @@ * http://lab.hakim.se/reveal-js * MIT licensed * - * Copyright (C) 2014 Hakim El Hattab, http://hakim.se + * Copyright (C) 2015 Hakim El Hattab, http://hakim.se */ (function( root, factory ) { if( typeof define === 'function' && define.amd ) { -- cgit v1.2.3 From b71705c76ff867ac2601d17cec4228ca3b1d5870 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 16 Jan 2015 16:12:54 +0100 Subject: background images now work in overview mode #1088 --- css/reveal.css | 8 ++++++++ css/reveal.scss | 10 ++++++++++ js/reveal.js | 27 ++++++++++++++++++++++----- 3 files changed, 40 insertions(+), 5 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 05bfd2d..d8061de 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -669,6 +669,14 @@ body { background: none; overflow: visible; } +.reveal.overview .backgrounds .slide-background { + opacity: 1; + visibility: visible; } + +.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { + -webkit-transition: none !important; + transition: none !important; } + /********************************************* * PAUSED MODE *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 6cc21ba..b0db2ef 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -786,6 +786,16 @@ body { } +.reveal.overview .backgrounds .slide-background { + opacity: 1; + visibility: visible; +} +.reveal.overview .backgrounds .slide-background, +.reveal.overview-deactivating .backgrounds .slide-background { + transition: none !important; +} + + /********************************************* * PAUSED MODE *********************************************/ diff --git a/js/reveal.js b/js/reveal.js index 3ee2cd0..8d547dd 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1642,31 +1642,41 @@ dom.wrapper.classList.add( 'overview' ); dom.wrapper.classList.remove( 'overview-deactivating' ); - var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ); + // Move the backgrounds element into the slide container to + // that the same scaling is applied + dom.slides.appendChild( dom.background ); + + var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), + horizontalBackgrounds = dom.background.childNodes; for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { var hslide = horizontalSlides[i], + hbackground = horizontalBackgrounds[i], hoffset = config.rtl ? -105 : 105; hslide.setAttribute( 'data-index-h', i ); // Apply CSS transform transformElement( hslide, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' ); + transformElement( hbackground, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' ); if( hslide.classList.contains( 'stack' ) ) { - var verticalSlides = hslide.querySelectorAll( 'section' ); + var verticalSlides = hslide.querySelectorAll( 'section' ), + verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' ); for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide ); - var vslide = verticalSlides[j]; + var vslide = verticalSlides[j], + vbackground = verticalBackgrounds[j]; vslide.setAttribute( 'data-index-h', i ); vslide.setAttribute( 'data-index-v', j ); // Apply CSS transform transformElement( vslide, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' ); + transformElement( vbackground, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' ); // Navigate to this slide on click vslide.addEventListener( 'click', onOverviewSlideClicked, true ); @@ -1709,6 +1719,9 @@ dom.wrapper.classList.remove( 'overview' ); + // Move the background element back out + dom.wrapper.appendChild( dom.background ); + // Temporarily add a class so that transitions can do different things // depending on whether they are exiting/entering overview, or just // moving from slide to slide @@ -1718,14 +1731,18 @@ dom.wrapper.classList.remove( 'overview-deactivating' ); }, 1 ); - // Select all slides + // Clean up changes made to slides toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { - // Resets all transforms to use the external styles transformElement( slide, '' ); slide.removeEventListener( 'click', onOverviewSlideClicked, true ); } ); + // Clean up changes made to backgrounds + toArray( dom.background.querySelectorAll( '.slide-background' ) ).forEach( function( background ) { + transformElement( background, '' ); + } ); + slide( indexh, indexv ); cueAutoSlide(); -- cgit v1.2.3 From 66d7b6bfae8d14611c2c10c81412668d0eb8a3ed Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 16 Jan 2015 16:46:34 +0100 Subject: firefox support for #1088 --- css/reveal.css | 6 +++++- css/reveal.scss | 6 ++++-- 2 files changed, 9 insertions(+), 3 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index d8061de..67986b6 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -669,6 +669,10 @@ body { background: none; overflow: visible; } +.reveal.overview .backgrounds { + -webkit-perspective: inherit; + perspective: inherit; } + .reveal.overview .backgrounds .slide-background { opacity: 1; visibility: visible; } @@ -738,7 +742,7 @@ body { /********************************************* * PER-SLIDE BACKGROUNDS *********************************************/ -.reveal > .backgrounds { +.reveal .backgrounds { position: absolute; width: 100%; height: 100%; diff --git a/css/reveal.scss b/css/reveal.scss index b0db2ef..1c48154 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -785,7 +785,9 @@ body { overflow: visible; } - +.reveal.overview .backgrounds { + perspective: inherit; +} .reveal.overview .backgrounds .slide-background { opacity: 1; visibility: visible; @@ -867,7 +869,7 @@ body { * PER-SLIDE BACKGROUNDS *********************************************/ -.reveal>.backgrounds { +.reveal .backgrounds { position: absolute; width: 100%; height: 100%; -- cgit v1.2.3 From e0aba9f5aec9d1bea9f1b1729d5f6022e412196c Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 17 Jan 2015 10:33:18 +0100 Subject: apply z position to slide container, rather than individual slides --- css/reveal.css | 2 +- css/reveal.scss | 3 +-- js/reveal.js | 14 ++++++++++---- 3 files changed, 12 insertions(+), 7 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 67986b6..35a048f 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -627,7 +627,7 @@ body { /********************************************* * OVERVIEW *********************************************/ -.reveal.overview .slides { +.reveal.overview { -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-perspective: 700px; diff --git a/css/reveal.scss b/css/reveal.scss index 1c48154..a1c14a1 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -743,11 +743,10 @@ body { * OVERVIEW *********************************************/ -.reveal.overview .slides { +.reveal.overview { perspective-origin: 50% 50%; perspective: 700px; } - .reveal.overview .slides section { height: 700px; overflow: hidden; diff --git a/js/reveal.js b/js/reveal.js index 4d5fdd3..5805ee9 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -165,6 +165,9 @@ // The current scale of the presentation (see width/height config) scale = 1, + // The current z position of the presentation container + z = 0, + // Cached references to DOM elements dom = {}, @@ -1470,6 +1473,7 @@ // Prefer zooming in desktop Chrome so that content remains crisp if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) { dom.slides.style.zoom = scale; + transformElement( dom.slides, 'translateZ(-'+ z +'px)' ); } // Apply scale transform as a fallback else { @@ -1477,7 +1481,7 @@ dom.slides.style.top = '50%'; dom.slides.style.bottom = 'auto'; dom.slides.style.right = 'auto'; - transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +')' ); + transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +')' + ' translateZ(-'+ z +'px)' ); } } @@ -1635,8 +1639,10 @@ var wasActive = dom.wrapper.classList.contains( 'overview' ); - // Vary the depth of the overview based on screen size - var depth = window.innerWidth < 400 ? 1000 : 2500; + // Set the depth of the presentation. This determinse how far we + // zoom out and varies based on display size. It gets applied at + // the layout step. + z = window.innerWidth < 400 ? 1000 : 2500; dom.wrapper.classList.add( 'overview' ); dom.wrapper.classList.remove( 'overview-deactivating' ); @@ -1653,7 +1659,7 @@ hbackground = horizontalBackgrounds[i], hoffset = config.rtl ? -105 : 105; - var htransform = 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)'; + var htransform = 'translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)'; hslide.setAttribute( 'data-index-h', i ); -- cgit v1.2.3 From 95bba5179fa422ec8bd3934a67929053b41ac5d8 Mon Sep 17 00:00:00 2001 From: Johannes Ammon Date: Sun, 18 Jan 2015 10:55:05 +0100 Subject: Mixins for readability of transitions added To honor the DRY principle repeating patterns have been factored out. In addition there was an anchor missing in README.md. --- README.md | 2 +- css/reveal.scss | 159 +++++++++++++++++++++++++++----------------------------- 2 files changed, 79 insertions(+), 82 deletions(-) (limited to 'css/reveal.scss') diff --git a/README.md b/README.md index e748ca8..12ddea8 100644 --- a/README.md +++ b/README.md @@ -951,7 +951,7 @@ Reveal.initialize({ Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability. -## Installation +## Installation The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source. diff --git a/css/reveal.scss b/css/reveal.scss index 6cc21ba..ed74153 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -447,93 +447,98 @@ body { /********************************************* - * SLIDE TRANSITION - * Aliased 'linear' for backwards compatibility + * Mixins for readability of transitions *********************************************/ -.reveal.slide section, -.reveal.linear section { - backface-visibility: hidden; +@mixin transition-global($style) { + .reveal .slides>section[data-transition=#{$style}], + .reveal.#{$style} .slides>section:not([data-transition]) { + @content; + } } - -.reveal .slides>section[data-transition=slide].past, -.reveal.slide .slides>section:not([data-transition]).past, -.reveal .slides>section[data-transition=linear].past, -.reveal.linear .slides>section:not([data-transition]).past { - transform: translate(-150%, 0); +@mixin transition-horizontal-past($style) { + .reveal .slides>section[data-transition=#{$style}].past, + .reveal.#{$style} .slides>section:not([data-transition]).past { + @content; + } } -.reveal .slides>section[data-transition=slide].future, -.reveal.slide .slides>section:not([data-transition]).future, -.reveal .slides>section[data-transition=linear].future, -.reveal.linear .slides>section:not([data-transition]).future { - transform: translate(150%, 0); +@mixin transition-horizontal-future($style) { + .reveal .slides>section[data-transition=#{$style}].future, + .reveal.#{$style} .slides>section:not([data-transition]).future { + @content; + } } -.reveal .slides>section>section[data-transition=slide].past, -.reveal.slide .slides>section>section:not([data-transition]).past, -.reveal .slides>section>section[data-transition=linear].past, -.reveal.linear .slides>section>section:not([data-transition]).past { - transform: translate(0, -150%); +@mixin transition-vertical-past($style) { + .reveal .slides>section>section[data-transition=#{$style}].past, + .reveal.#{$style} .slides>section>section:not([data-transition]).past { + @content; + } } -.reveal .slides>section>section[data-transition=slide].future, -.reveal.slide .slides>section>section:not([data-transition]).future, -.reveal .slides>section>section[data-transition=linear].future, -.reveal.linear .slides>section>section:not([data-transition]).future { - transform: translate(0, 150%); +@mixin transition-vertical-future($style) { + .reveal .slides>section>section[data-transition=#{$style}].future, + .reveal.#{$style} .slides>section>section:not([data-transition]).future { + @content; + } } +/********************************************* + * SLIDE TRANSITION + * Aliased 'linear' for backwards compatibility + *********************************************/ + +@each $stylename in slide, linear { + .reveal.#{$stylename} section { + backface-visibility: hidden; + } + @include transition-horizontal-past(#{$stylename}) { + transform: translate(-150%, 0); + } + @include transition-horizontal-future(#{$stylename}) { + transform: translate(150%, 0); + } + @include transition-vertical-past(#{$stylename}) { + transform: translate(0, -150%); + } + @include transition-vertical-future(#{$stylename}) { + transform: translate(0, 150%); + } +} /********************************************* * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ -.reveal .slides>section[data-transition=default].past, -.reveal.default .slides>section:not([data-transition]).past, -.reveal .slides>section[data-transition=convex].past, -.reveal.convex .slides>section:not([data-transition]).past { - transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); -} -.reveal .slides>section[data-transition=default].future, -.reveal.default .slides>section:not([data-transition]).future, -.reveal .slides>section[data-transition=convex].future, -.reveal.convex .slides>section:not([data-transition]).future { - transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); -} - -.reveal .slides>section>section[data-transition=default].past, -.reveal.default .slides>section>section:not([data-transition]).past, -.reveal .slides>section>section[data-transition=convex].past, -.reveal.convex .slides>section>section:not([data-transition]).past { - transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); -} -.reveal .slides>section>section[data-transition=default].future, -.reveal.default .slides>section>section:not([data-transition]).future, -.reveal .slides>section>section[data-transition=convex].future, -.reveal.convex .slides>section>section:not([data-transition]).future { - transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); +@each $stylename in default, convex { + @include transition-horizontal-past(#{$stylename}) { + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + } + @include transition-horizontal-future(#{$stylename}) { + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + } + @include transition-vertical-past(#{$stylename}) { + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + } + @include transition-vertical-future(#{$stylename}) { + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + } } - /********************************************* * CONCAVE TRANSITION *********************************************/ -.reveal .slides>section[data-transition=concave].past, -.reveal.concave .slides>section:not([data-transition]).past { +@include transition-horizontal-past(concave) { transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } -.reveal .slides>section[data-transition=concave].future, -.reveal.concave .slides>section:not([data-transition]).future { +@include transition-horizontal-future(concave) { transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } - -.reveal .slides>section>section[data-transition=concave].past, -.reveal.concave .slides>section>section:not([data-transition]).past { +@include transition-vertical-past(concave) { transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } -.reveal .slides>section>section[data-transition=concave].future, -.reveal.concave .slides>section>section:not([data-transition]).future { +@include transition-vertical-future(concave) { transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); } @@ -542,29 +547,22 @@ body { * ZOOM TRANSITION *********************************************/ -.reveal .slides>section[data-transition=zoom], -.reveal.zoom .slides>section:not([data-transition]) { - transition-timing-function: ease; +@include transition-global(zoom) { + transition-timing-function: ease; } - -.reveal .slides>section[data-transition=zoom].past, -.reveal.zoom .slides>section:not([data-transition]).past { - visibility: hidden; - transform: scale(16); +@include transition-horizontal-past(zoom) { + visibility: hidden; + transform: scale(16); } -.reveal .slides>section[data-transition=zoom].future, -.reveal.zoom .slides>section:not([data-transition]).future { - visibility: hidden; - transform: scale(0.2); +@include transition-horizontal-future(zoom) { + visibility: hidden; + transform: scale(0.2); } - -.reveal .slides>section>section[data-transition=zoom].past, -.reveal.zoom .slides>section>section:not([data-transition]).past { - transform: translate(0, -150%); +@include transition-vertical-past(zoom) { + transform: translate(0, -150%); } -.reveal .slides>section>section[data-transition=zoom].future, -.reveal.zoom .slides>section>section:not([data-transition]).future { - transform: translate(0, 150%); +@include transition-vertical-future(zoom) { + transform: translate(0, 150%); } @@ -732,8 +730,7 @@ body { * NO TRANSITION *********************************************/ -.reveal .slides section[data-transition=none], -.reveal.none .slides section:not([data-transition]) { +@include transition-global(none) { transform: none; transition: none; } -- cgit v1.2.3 From 420b6912d7ef004f3ced3cb89d95abf7a9ed1274 Mon Sep 17 00:00:00 2001 From: Johannes Ammon Date: Sun, 18 Jan 2015 18:12:36 +0100 Subject: Adding one-sided transitions Now the transition isn’t any more „per slide“ but „per movement of a slide“. So the slide can disappear in another way than it appeared. --- README.md | 21 +++++++++++++++++++++ css/reveal.scss | 4 ++++ 2 files changed, 25 insertions(+) (limited to 'css/reveal.scss') diff --git a/README.md b/README.md index 12ddea8..53c85c8 100644 --- a/README.md +++ b/README.md @@ -474,6 +474,27 @@ The global presentation transition is set using the ```transition``` config valu ``` +You can as well override only the appearing or the disappearing of the slide: + +```html +
+ The train goes on … +
+
+ and on … +
+
+ and stops. +
+
+ (Passengers entering and leaving) +
+
+ And it starts again. +
+``` + + Note that this does not work with the page and cube transitions. diff --git a/css/reveal.scss b/css/reveal.scss index ed74153..17e0407 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -458,12 +458,14 @@ body { } @mixin transition-horizontal-past($style) { .reveal .slides>section[data-transition=#{$style}].past, + .reveal .slides>section[data-transition~=#{$style}-out].past, .reveal.#{$style} .slides>section:not([data-transition]).past { @content; } } @mixin transition-horizontal-future($style) { .reveal .slides>section[data-transition=#{$style}].future, + .reveal .slides>section[data-transition~=#{$style}-in].future, .reveal.#{$style} .slides>section:not([data-transition]).future { @content; } @@ -471,12 +473,14 @@ body { @mixin transition-vertical-past($style) { .reveal .slides>section>section[data-transition=#{$style}].past, + .reveal .slides>section>section[data-transition~=#{$style}-out].past, .reveal.#{$style} .slides>section>section:not([data-transition]).past { @content; } } @mixin transition-vertical-future($style) { .reveal .slides>section>section[data-transition=#{$style}].future, + .reveal .slides>section>section[data-transition~=#{$style}-in].future, .reveal.#{$style} .slides>section>section:not([data-transition]).future { @content; } -- cgit v1.2.3 From 11293d7c9415862007dbc1e3936b0fcbf4626da1 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 26 Jan 2015 20:38:21 +0100 Subject: refactoring and optimization of overview mode --- css/reveal.css | 17 ++++++---- css/reveal.scss | 14 +++++--- js/reveal.js | 99 +++++++++++++++++++++++++++++++++++++++------------------ 3 files changed, 87 insertions(+), 43 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 35a048f..b198486 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -639,9 +639,10 @@ body { opacity: 1 !important; visibility: visible !important; cursor: pointer; - background: rgba(0, 0, 0, 0.1); -moz-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; + outline: 10px solid rgba(150, 150, 150, 0.1); + outline-offset: 10px; } .reveal.overview .slides section, .reveal.overview-deactivating .slides section { -webkit-transition: none !important; @@ -657,16 +658,14 @@ body { opacity: 1; cursor: pointer; } -.reveal.overview .slides section:hover { - background: rgba(0, 0, 0, 0.3); } - -.reveal.overview .slides section.present { - background: rgba(0, 0, 0, 0.3); } +.reveal.overview .slides section:hover, .reveal.overview .slides section.present { + outline: 10px solid rgba(150, 150, 150, 0.5); } .reveal.overview .slides > section.stack { padding: 0; top: 0 !important; background: none; + outline: none; overflow: visible; } .reveal.overview .backgrounds { @@ -681,6 +680,10 @@ body { -webkit-transition: none !important; transition: none !important; } +.reveal.overview-animated .slides { + -webkit-transition: -webkit-transform 0.4s ease; + transition: transform 0.4s ease; } + /********************************************* * PAUSED MODE *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index a1c14a1..02587fb 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -753,8 +753,9 @@ body { opacity: 1 !important; visibility: visible !important; cursor: pointer; - background: rgba(0,0,0,0.1); box-sizing: border-box; + outline: 10px solid rgba(150,150,150,0.1); + outline-offset: 10px; } .reveal.overview .slides section, .reveal.overview-deactivating .slides section { @@ -771,16 +772,15 @@ body { opacity: 1; cursor: pointer; } - .reveal.overview .slides section:hover { - background: rgba(0,0,0,0.3); - } + .reveal.overview .slides section:hover, .reveal.overview .slides section.present { - background: rgba(0,0,0,0.3); + outline: 10px solid rgba(150,150,150,0.5); } .reveal.overview .slides>section.stack { padding: 0; top: 0 !important; background: none; + outline: none; overflow: visible; } @@ -796,6 +796,10 @@ body { transition: none !important; } +.reveal.overview-animated .slides { + transition: transform 0.4s ease; +} + /********************************************* * PAUSED MODE diff --git a/js/reveal.js b/js/reveal.js index 9634c6b..74fcf5f 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -147,6 +147,9 @@ // Flags if reveal.js is loaded (has dispatched the 'ready' event) loaded = false, + // Flags if the overview mode is currently active + overview = false, + // The horizontal and vertical index of the currently active slide indexh, indexv, @@ -165,8 +168,9 @@ // The current scale of the presentation (see width/height config) scale = 1, - // The current z position of the presentation container - z = 0, + // The transform that is currently applied to the slides container + slidesTransform = '', + layoutTransform = '', // Cached references to DOM elements dom = {}, @@ -1058,6 +1062,12 @@ } + function transformSlides() { + + transformElement( dom.slides, layoutTransform ? layoutTransform + ' ' + slidesTransform : slidesTransform ); + + } + /** * Injects the given CSS styles into the DOM. */ @@ -1446,7 +1456,6 @@ var size = getComputedSlideSize(); var slidePadding = 20; // TODO Dig this out of DOM - var zTransform = z !== 0 ? 'translateZ(-'+ z +'px)' : ''; // Layout the contents of the slides layoutSlideContents( config.width, config.height, slidePadding ); @@ -1468,13 +1477,12 @@ dom.slides.style.top = ''; dom.slides.style.bottom = ''; dom.slides.style.right = ''; - transformElement( dom.slides, zTransform ); + layoutTransform = ''; } else { // Prefer zooming in desktop Chrome so that content remains crisp if( !isMobileDevice && /chrome/i.test( navigator.userAgent ) && typeof dom.slides.style.zoom !== 'undefined' ) { dom.slides.style.zoom = scale; - transformElement( dom.slides, zTransform ); } // Apply scale transform as a fallback else { @@ -1482,10 +1490,12 @@ dom.slides.style.top = '50%'; dom.slides.style.bottom = 'auto'; dom.slides.style.right = 'auto'; - transformElement( dom.slides, 'translate(-50%, -50%) scale('+ scale +') ' + zTransform ); + layoutTransform = 'translate(-50%, -50%) scale('+ scale +')'; } } + transformSlides(); + // Select all slides, vertical and horizontal var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ); @@ -1633,21 +1643,24 @@ function activateOverview() { // Only proceed if enabled in config - if( config.overview ) { - - // Don't auto-slide while in overview mode - cancelAutoSlide(); - - var wasActive = dom.wrapper.classList.contains( 'overview' ); + if( config.overview && !isOverview() ) { - // Set the depth of the presentation. This determinse how far we - // zoom out and varies based on display size. It gets applied at - // the layout step. - z = window.innerWidth < 400 ? 1000 : 2500; + overview = true; dom.wrapper.classList.add( 'overview' ); dom.wrapper.classList.remove( 'overview-deactivating' ); + setTimeout( function() { + dom.wrapper.classList.add( 'overview-animated' ); + }, 1 ); + + // Don't auto-slide while in overview mode + cancelAutoSlide(); + + var margin = 70; + var slideWidth = config.width + margin, + slideHeight = config.height + margin; + // Move the backgrounds element into the slide container to // that the same scaling is applied dom.slides.appendChild( dom.background ); @@ -1658,9 +1671,9 @@ for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { var hslide = horizontalSlides[i], hbackground = horizontalBackgrounds[i], - hoffset = config.rtl ? -105 : 105; + hoffset = config.rtl ? -slideWidth : slideWidth; - var htransform = 'translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)'; + var htransform = 'translateX(' + ( i * hoffset ) + 'px)'; hslide.setAttribute( 'data-index-h', i ); @@ -1679,7 +1692,7 @@ var vslide = verticalSlides[j], vbackground = verticalBackgrounds[j]; - var vtransform = 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)'; + var vtransform = 'translateY(' + ( j * slideHeight ) + 'px)'; vslide.setAttribute( 'data-index-h', i ); vslide.setAttribute( 'data-index-v', j ); @@ -1702,22 +1715,38 @@ } updateSlidesVisibility(); + updateOverview(); layout(); - if( !wasActive ) { - // Notify observers of the overview showing - dispatchEvent( 'overviewshown', { - 'indexh': indexh, - 'indexv': indexv, - 'currentSlide': currentSlide - } ); - } + // Notify observers of the overview showing + dispatchEvent( 'overviewshown', { + 'indexh': indexh, + 'indexv': indexv, + 'currentSlide': currentSlide + } ); } } + function updateOverview() { + + var z = window.innerWidth < 400 ? 1000 : 2500; + var margin = 70; + var slideWidth = config.width + margin, + slideHeight = config.height + margin; + + slidesTransform = [ + 'translateX('+ ( -indexh * slideWidth ) +'px)', + 'translateY('+ ( -indexv * slideHeight ) +'px)', + 'translateZ('+ ( -z ) +'px)' + ].join( ' ' ); + + transformSlides(); + + } + /** * Exits the slide overview and enters the currently * active slide. @@ -1727,11 +1756,17 @@ // Only proceed if enabled in config if( config.overview ) { + slidesTransform = ''; + + overview = false; + dom.wrapper.classList.remove( 'overview' ); // Move the background element back out dom.wrapper.appendChild( dom.background ); + dom.wrapper.classList.remove( 'overview-animated' ); + // Temporarily add a class so that transitions can do different things // depending on whether they are exiting/entering overview, or just // moving from slide to slide @@ -1755,6 +1790,8 @@ slide( indexh, indexv ); + layout(); + cueAutoSlide(); // Notify observers of the overview hiding @@ -1793,7 +1830,7 @@ */ function isOverview() { - return dom.wrapper.classList.contains( 'overview' ); + return overview; } @@ -1995,7 +2032,7 @@ // If the overview is active, re-activate it to update positions if( isOverview() ) { - activateOverview(); + updateOverview(); } // Find the current horizontal slide and any possible vertical slides @@ -2289,11 +2326,11 @@ // The number of steps away from the present slide that will // be visible - var viewDistance = isOverview() ? 10 : config.viewDistance; + var viewDistance = isOverview() ? 7 : config.viewDistance; // Limit view distance on weaker devices if( isMobileDevice ) { - viewDistance = isOverview() ? 6 : 2; + viewDistance = isOverview() ? 7 : 2; } // Limit view distance on weaker devices -- cgit v1.2.3 From e29c706533c227682cfde1ac0b187e90738b9bbc Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 27 Jan 2015 09:21:49 +0100 Subject: further overview refactoring --- css/reveal.css | 10 ++--- css/reveal.scss | 7 ++-- js/reveal.js | 121 +++++++++++++++++++++++++++++++------------------------- 3 files changed, 77 insertions(+), 61 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index b198486..69b7cf9 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -645,8 +645,8 @@ body { outline-offset: 10px; } .reveal.overview .slides section, .reveal.overview-deactivating .slides section { - -webkit-transition: none !important; - transition: none !important; } + -webkit-transition: none; + transition: none; } .reveal.overview .slides section .fragment { opacity: 1; } @@ -677,10 +677,10 @@ body { visibility: visible; } .reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { - -webkit-transition: none !important; - transition: none !important; } + -webkit-transition: none; + transition: none; } -.reveal.overview-animated .slides { +.reveal.overview-animated .slides, .reveal.overview-animated .slides section { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } diff --git a/css/reveal.scss b/css/reveal.scss index 02587fb..b3f3bdc 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -759,7 +759,7 @@ body { } .reveal.overview .slides section, .reveal.overview-deactivating .slides section { - transition: none !important; + transition: none; } .reveal.overview .slides section .fragment { opacity: 1; @@ -793,10 +793,11 @@ body { } .reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { - transition: none !important; + transition: none; } -.reveal.overview-animated .slides { +.reveal.overview-animated .slides, +.reveal.overview-animated .slides section { transition: transform 0.4s ease; } diff --git a/js/reveal.js b/js/reveal.js index 74fcf5f..ddbe800 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1636,9 +1636,6 @@ /** * Displays the overview of slides (quick nav) by * scaling down and arranging all slide elements. - * - * Experimental feature, might be dropped if perf - * can't be improved. */ function activateOverview() { @@ -1657,64 +1654,32 @@ // Don't auto-slide while in overview mode cancelAutoSlide(); - var margin = 70; - var slideWidth = config.width + margin, - slideHeight = config.height + margin; - // Move the backgrounds element into the slide container to // that the same scaling is applied dom.slides.appendChild( dom.background ); - var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), - horizontalBackgrounds = dom.background.childNodes; - - for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) { - var hslide = horizontalSlides[i], - hbackground = horizontalBackgrounds[i], - hoffset = config.rtl ? -slideWidth : slideWidth; + // Bind events so that clicking on a slide navigates to it + toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { - var htransform = 'translateX(' + ( i * hoffset ) + 'px)'; - - hslide.setAttribute( 'data-index-h', i ); - - // Apply CSS transform - transformElement( hslide, htransform ); - transformElement( hbackground, htransform ); + hslide.setAttribute( 'data-index-h', h ); if( hslide.classList.contains( 'stack' ) ) { + toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { - var verticalSlides = hslide.querySelectorAll( 'section' ), - verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' ); - - for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { - var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide ); - - var vslide = verticalSlides[j], - vbackground = verticalBackgrounds[j]; - - var vtransform = 'translateY(' + ( j * slideHeight ) + 'px)'; - - vslide.setAttribute( 'data-index-h', i ); - vslide.setAttribute( 'data-index-v', j ); - - // Apply CSS transform - transformElement( vslide, vtransform ); - transformElement( vbackground, vtransform ); - - // Navigate to this slide on click + vslide.setAttribute( 'data-index-h', h ); + vslide.setAttribute( 'data-index-v', v ); vslide.addEventListener( 'click', onOverviewSlideClicked, true ); - } + } ); } else { - - // Navigate to this slide on click hslide.addEventListener( 'click', onOverviewSlideClicked, true ); - } - } + + } ); updateSlidesVisibility(); + layoutOverview(); updateOverview(); layout(); @@ -1730,17 +1695,64 @@ } + /** + * Moves the slides into a grid for display in the + * overview mode. + */ + function layoutOverview() { + + var margin = 70; + var slideWidth = config.width + margin, + slideHeight = config.height + margin; + + // Reverse in RTL mode + if( config.rtl ) { + slideWidth = -slideWidth; + } + + // Layout slides + toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { + transformElement( hslide, 'translateX(' + ( h * slideWidth ) + 'px)' ); + + if( hslide.classList.contains( 'stack' ) ) { + + toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { + transformElement( vslide, 'translateY(' + ( v * slideHeight ) + 'px)' ); + } ); + + } + } ); + + // Layout slide backgrounds + toArray( dom.background.childNodes ).forEach( function( hbackground, h ) { + transformElement( hbackground, 'translateX(' + ( h * slideWidth ) + 'px)' ); + + toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) { + transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' ); + } ); + } ); + + } + + /** + * Moves the overview viewport to the current slides. + * Called each time the current slide changes. + */ function updateOverview() { - var z = window.innerWidth < 400 ? 1000 : 2500; var margin = 70; var slideWidth = config.width + margin, slideHeight = config.height + margin; + // Reverse in RTL mode + if( config.rtl ) { + slideWidth = -slideWidth; + } + slidesTransform = [ 'translateX('+ ( -indexh * slideWidth ) +'px)', 'translateY('+ ( -indexv * slideHeight ) +'px)', - 'translateZ('+ ( -z ) +'px)' + 'translateZ('+ ( window.innerWidth < 400 ? -1000 : -2500 ) +'px)' ].join( ' ' ); transformSlides(); @@ -1761,10 +1773,6 @@ overview = false; dom.wrapper.classList.remove( 'overview' ); - - // Move the background element back out - dom.wrapper.appendChild( dom.background ); - dom.wrapper.classList.remove( 'overview-animated' ); // Temporarily add a class so that transitions can do different things @@ -1776,6 +1784,9 @@ dom.wrapper.classList.remove( 'overview-deactivating' ); }, 1 ); + // Move the background element back out + dom.wrapper.appendChild( dom.background ); + // Clean up changes made to slides toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { transformElement( slide, '' ); @@ -2145,6 +2156,10 @@ formatEmbeddedContent(); + if( isOverview() ) { + layoutOverview(); + } + } /** @@ -2326,11 +2341,11 @@ // The number of steps away from the present slide that will // be visible - var viewDistance = isOverview() ? 7 : config.viewDistance; + var viewDistance = isOverview() ? 10 : config.viewDistance; // Limit view distance on weaker devices if( isMobileDevice ) { - viewDistance = isOverview() ? 7 : 2; + viewDistance = isOverview() ? 6 : 2; } // Limit view distance on weaker devices -- cgit v1.2.3 From c8569e2d9ff675b806e5d5bf94ba1a07d121e74b Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 27 Jan 2015 19:27:55 +0100 Subject: cross browser adjustments for overview mode --- css/reveal.css | 112 ++++++++++++++++++++++------------------------- css/reveal.scss | 133 +++++++++++++++++++++++++++++--------------------------- js/reveal.js | 22 ++++++---- 3 files changed, 136 insertions(+), 131 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 69b7cf9..2e18ade 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -624,66 +624,6 @@ body { -webkit-transition: none; transition: none; } -/********************************************* - * OVERVIEW - *********************************************/ -.reveal.overview { - -webkit-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; - -webkit-perspective: 700px; - perspective: 700px; } - -.reveal.overview .slides section { - height: 700px; - overflow: hidden; - opacity: 1 !important; - visibility: visible !important; - cursor: pointer; - -moz-box-sizing: border-box; - box-sizing: border-box; - outline: 10px solid rgba(150, 150, 150, 0.1); - outline-offset: 10px; } - -.reveal.overview .slides section, .reveal.overview-deactivating .slides section { - -webkit-transition: none; - transition: none; } - -.reveal.overview .slides section .fragment { - opacity: 1; } - -.reveal.overview .slides section:after, .reveal.overview .slides section:before { - display: none !important; } - -.reveal.overview .slides section > section { - opacity: 1; - cursor: pointer; } - -.reveal.overview .slides section:hover, .reveal.overview .slides section.present { - outline: 10px solid rgba(150, 150, 150, 0.5); } - -.reveal.overview .slides > section.stack { - padding: 0; - top: 0 !important; - background: none; - outline: none; - overflow: visible; } - -.reveal.overview .backgrounds { - -webkit-perspective: inherit; - perspective: inherit; } - -.reveal.overview .backgrounds .slide-background { - opacity: 1; - visibility: visible; } - -.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { - -webkit-transition: none; - transition: none; } - -.reveal.overview-animated .slides, .reveal.overview-animated .slides section { - -webkit-transition: -webkit-transform 0.4s ease; - transition: transform 0.4s ease; } - /********************************************* * PAUSED MODE *********************************************/ @@ -904,6 +844,58 @@ body { -webkit-transition-duration: 1200ms; transition-duration: 1200ms; } +/********************************************* + * OVERVIEW + *********************************************/ +.reveal.overview { + -webkit-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; + -webkit-perspective: 700px; + perspective: 700px; } + .reveal.overview .slides section { + height: 700px; + opacity: 1 !important; + overflow: hidden; + visibility: visible !important; + cursor: pointer; + -moz-box-sizing: border-box; + box-sizing: border-box; } + .reveal.overview .slides section:hover, .reveal.overview .slides section.present { + outline: 10px solid rgba(150, 150, 150, 0.4); + outline-offset: 10px; } + .reveal.overview .slides section .fragment { + opacity: 1; + -webkit-transition: none; + transition: none; } + .reveal.overview .slides section:after, .reveal.overview .slides section:before { + display: none !important; } + .reveal.overview .slides > section.stack { + padding: 0; + top: 0 !important; + background: none; + outline: none; + overflow: visible; } + .reveal.overview .backgrounds { + -webkit-perspective: inherit; + perspective: inherit; } + .reveal.overview .backgrounds .slide-background { + opacity: 1; + visibility: visible; + outline: 10px solid rgba(150, 150, 150, 0.1); + outline-offset: 10px; } + +.reveal.overview .slides section, .reveal.overview-deactivating .slides section { + -webkit-transition: none; + transition: none; } + +.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background { + -webkit-transition: none; + transition: none; } + +.reveal.overview-animated .slides, .reveal.overview-animated .slides section, .reveal.overview-animated .backgrounds .slide-background { + -webkit-transition: -webkit-transform 0.4s ease; + transition: transform 0.4s ease; } + /********************************************* * RTL SUPPORT *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index b3f3bdc..70fe2c1 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -739,69 +739,6 @@ body { } -/********************************************* - * OVERVIEW - *********************************************/ - -.reveal.overview { - perspective-origin: 50% 50%; - perspective: 700px; -} -.reveal.overview .slides section { - height: 700px; - overflow: hidden; - opacity: 1 !important; - visibility: visible !important; - cursor: pointer; - box-sizing: border-box; - outline: 10px solid rgba(150,150,150,0.1); - outline-offset: 10px; -} -.reveal.overview .slides section, -.reveal.overview-deactivating .slides section { - transition: none; -} -.reveal.overview .slides section .fragment { - opacity: 1; -} -.reveal.overview .slides section:after, -.reveal.overview .slides section:before { - display: none !important; -} -.reveal.overview .slides section>section { - opacity: 1; - cursor: pointer; -} - .reveal.overview .slides section:hover, - .reveal.overview .slides section.present { - outline: 10px solid rgba(150,150,150,0.5); - } -.reveal.overview .slides>section.stack { - padding: 0; - top: 0 !important; - background: none; - outline: none; - overflow: visible; -} - -.reveal.overview .backgrounds { - perspective: inherit; -} -.reveal.overview .backgrounds .slide-background { - opacity: 1; - visibility: visible; -} -.reveal.overview .backgrounds .slide-background, -.reveal.overview-deactivating .backgrounds .slide-background { - transition: none; -} - -.reveal.overview-animated .slides, -.reveal.overview-animated .slides section { - transition: transform 0.4s ease; -} - - /********************************************* * PAUSED MODE *********************************************/ @@ -1042,6 +979,76 @@ body { } +/********************************************* + * OVERVIEW + *********************************************/ + +.reveal.overview { + perspective-origin: 50% 50%; + perspective: 700px; + + .slides section { + height: 700px; + opacity: 1 !important; + overflow: hidden; + visibility: visible !important; + cursor: pointer; + box-sizing: border-box; + } + .slides section:hover, + .slides section.present { + outline: 10px solid rgba(150,150,150,0.4); + outline-offset: 10px; + } + .slides section .fragment { + opacity: 1; + transition: none; + } + .slides section:after, + .slides section:before { + display: none !important; + } + .slides>section.stack { + padding: 0; + top: 0 !important; + background: none; + outline: none; + overflow: visible; + } + + .backgrounds { + perspective: inherit; + } + + .backgrounds .slide-background { + opacity: 1; + visibility: visible; + + // This can't be applied to the slide itself in Safari + outline: 10px solid rgba(150,150,150,0.1); + outline-offset: 10px; + } +} + +// Disable transitions transitions while we're activating +// or deactivating the overview mode. +.reveal.overview .slides section, +.reveal.overview-deactivating .slides section { + transition: none; +} + +.reveal.overview .backgrounds .slide-background, +.reveal.overview-deactivating .backgrounds .slide-background { + transition: none; +} + +.reveal.overview-animated .slides, +.reveal.overview-animated .slides section, +.reveal.overview-animated .backgrounds .slide-background { + transition: transform 0.4s ease; +} + + /********************************************* * RTL SUPPORT *********************************************/ diff --git a/js/reveal.js b/js/reveal.js index ddbe800..37c6831 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -300,7 +300,11 @@ features.touch = !!( 'ontouchstart' in window ); - isMobileDevice = navigator.userAgent.match( /(iphone|ipod|ipad|android)/gi ); + // Transitions in the overview are disabled in desktop and + // mobile Safari since they lag terribly + features.overviewTransitions = !/Version\/[\d\.]+.*Safari/.test( navigator.userAgent ); + + isMobileDevice = /(iphone|ipod|ipad|android)/gi.test( navigator.userAgent ); } @@ -1647,9 +1651,11 @@ dom.wrapper.classList.add( 'overview' ); dom.wrapper.classList.remove( 'overview-deactivating' ); - setTimeout( function() { - dom.wrapper.classList.add( 'overview-animated' ); - }, 1 ); + if( features.overviewTransitions ) { + setTimeout( function() { + dom.wrapper.classList.add( 'overview-animated' ); + }, 1 ); + } // Don't auto-slide while in overview mode cancelAutoSlide(); @@ -1712,12 +1718,12 @@ // Layout slides toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { - transformElement( hslide, 'translateX(' + ( h * slideWidth ) + 'px)' ); + transformElement( hslide, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' ); if( hslide.classList.contains( 'stack' ) ) { toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { - transformElement( vslide, 'translateY(' + ( v * slideHeight ) + 'px)' ); + transformElement( vslide, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' ); } ); } @@ -1725,10 +1731,10 @@ // Layout slide backgrounds toArray( dom.background.childNodes ).forEach( function( hbackground, h ) { - transformElement( hbackground, 'translateX(' + ( h * slideWidth ) + 'px)' ); + transformElement( hbackground, 'translate3d(' + ( h * slideWidth ) + 'px, 0, 0)' ); toArray( hbackground.querySelectorAll( '.slide-background' ) ).forEach( function( vbackground, v ) { - transformElement( vbackground, 'translateY(' + ( v * slideHeight ) + 'px)' ); + transformElement( vbackground, 'translate3d(0, ' + ( v * slideHeight ) + 'px, 0)' ); } ); } ); -- cgit v1.2.3 From 621e8d71764cf19f329da3757caaa6f62fe2dbf2 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 29 Jan 2015 17:08:28 +0100 Subject: only transition slides container in overview mode --- css/reveal.css | 2 +- css/reveal.scss | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 2e18ade..a02c0fb 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -892,7 +892,7 @@ body { -webkit-transition: none; transition: none; } -.reveal.overview-animated .slides, .reveal.overview-animated .slides section, .reveal.overview-animated .backgrounds .slide-background { +.reveal.overview-animated .slides { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } diff --git a/css/reveal.scss b/css/reveal.scss index 70fe2c1..7e5b71d 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1042,9 +1042,7 @@ body { transition: none; } -.reveal.overview-animated .slides, -.reveal.overview-animated .slides section, -.reveal.overview-animated .backgrounds .slide-background { +.reveal.overview-animated .slides { transition: transform 0.4s ease; } -- cgit v1.2.3 From a4852c7cb2a5792d0ead3ee59435371225755dea Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 3 Feb 2015 11:56:54 +0100 Subject: prevent iframes from offsetting presentation --- css/reveal.css | 1 + css/reveal.scss | 1 + js/reveal.js | 23 +++++++++++++++++++++++ 3 files changed, 25 insertions(+) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index a02c0fb..43d774b 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -275,6 +275,7 @@ body { position: relative; width: 100%; height: 100%; + overflow: hidden; -ms-touch-action: none; touch-action: none; } diff --git a/css/reveal.scss b/css/reveal.scss index 7e5b71d..23cfefd 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -352,6 +352,7 @@ body { position: relative; width: 100%; height: 100%; + overflow: hidden; touch-action: none; } diff --git a/js/reveal.js b/js/reveal.js index dbe3679..fdf3204 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -384,6 +384,9 @@ // Listen to messages posted to this window setupPostMessage(); + // Prevent iframes from scrolling the slides out of view + setupIframeScrollPrevention(); + // Resets all vertical slides so that only the first is visible resetVerticalSlides(); @@ -567,6 +570,26 @@ } + /** + * This is an unfortunate necessity. Iframes can trigger the + * parent window to scroll, for example by focusing an input. + * This scrolling can not be prevented by hiding overflow in + * CSS so we have to resort to repeatedly checking if the + * browser has decided to offset our slides :( + */ + function setupIframeScrollPrevention() { + + if( dom.slides.querySelector( 'iframe' ) ) { + setInterval( function() { + if( dom.wrapper.scrollTop !== 0 || dom.wrapper.scrollLeft !== 0 ) { + dom.wrapper.scrollTop = 0; + dom.wrapper.scrollLeft = 0; + } + }, 500 ); + } + + } + /** * Creates an HTML element and returns a reference to it. * If the element already exists the existing instance will -- cgit v1.2.3 From 46777415681e6e3622046d175491c4af7b65e363 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 5 Mar 2015 10:49:21 +0100 Subject: remove selection color from core css --- css/reveal.css | 10 ---------- css/reveal.scss | 12 ------------ 2 files changed, 22 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 43d774b..15696d3 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -33,16 +33,6 @@ body { background-color: #fff; color: #000; } -::-moz-selection { - background: #FF5E99; - color: #fff; - text-shadow: none; } - -::selection { - background: #FF5E99; - color: #fff; - text-shadow: none; } - /********************************************* * VIEW FRAGMENTS *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 23cfefd..f0d269f 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -57,18 +57,6 @@ body { color: #000; } -::-moz-selection { - background: #FF5E99; - color: #fff; - text-shadow: none; -} - -::selection { - background: #FF5E99; - color: #fff; - text-shadow: none; -} - /********************************************* * VIEW FRAGMENTS -- cgit v1.2.3 From bbfdb3b66e081670f06fec1f6d6838d4591cdb61 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 25 Mar 2015 19:17:09 +0100 Subject: reset fragment transforms using 'none' --- css/reveal.css | 11 ++++++----- css/reveal.scss | 4 ++-- 2 files changed, 8 insertions(+), 7 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 15696d3..841455c 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -66,16 +66,17 @@ body { -ms-transform: scale(0.1); transform: scale(0.1); } .reveal .slides section .fragment.zoom-in.visible { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); } + -webkit-transform: none; + -ms-transform: none; + transform: none; } .reveal .slides section .fragment.roll-in { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .reveal .slides section .fragment.roll-in.visible { - -webkit-transform: rotateX(0); - transform: rotateX(0); } + -webkit-transform: none; + -ms-transform: none; + transform: none; } .reveal .slides section .fragment.fade-out { opacity: 1; diff --git a/css/reveal.scss b/css/reveal.scss index f0d269f..7f9c993 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -95,7 +95,7 @@ body { transform: scale( 0.1 ); &.visible { - transform: scale( 1 ); + transform: none; } } @@ -103,7 +103,7 @@ body { transform: rotateX( 90deg ); &.visible { - transform: rotateX( 0 ); + transform: none; } } -- cgit v1.2.3 From ecc6222e7efc4781cc11402318b281f4211be806 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 25 Mar 2015 19:18:16 +0100 Subject: fix for #1150? --- css/reveal.css | 4 ++-- css/reveal.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 841455c..8bbe38c 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -71,8 +71,8 @@ body { transform: none; } .reveal .slides section .fragment.roll-in { - -webkit-transform: rotateX(90deg); - transform: rotateX(90deg); } + -webkit-transform: rotateX(60deg); + transform: rotateX(60deg); } .reveal .slides section .fragment.roll-in.visible { -webkit-transform: none; -ms-transform: none; diff --git a/css/reveal.scss b/css/reveal.scss index 7f9c993..dd7cc75 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -100,7 +100,7 @@ body { } .reveal .slides section .fragment.roll-in { - transform: rotateX( 90deg ); + transform: rotateX( 60deg ); &.visible { transform: none; -- cgit v1.2.3 From 4e3b91ae03da5a82be4e221dae5c3aa45401359d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 12 Apr 2015 18:12:48 +0200 Subject: remove 'roll-in' fragment style due to Chrome crash #1150 --- README.md | 1 - css/reveal.css | 8 -------- css/reveal.scss | 8 -------- index.html | 1 - test/test-markdown-element-attributes.html | 6 +++--- 5 files changed, 3 insertions(+), 21 deletions(-) (limited to 'css/reveal.scss') diff --git a/README.md b/README.md index ba71b27..1f286a1 100644 --- a/README.md +++ b/README.md @@ -515,7 +515,6 @@ The default fragment style is to start out invisible and fade in. This style can

grow

shrink

-

roll-in

fade-out

visible only once

blue only once

diff --git a/css/reveal.css b/css/reveal.css index 8bbe38c..6127a5b 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -70,14 +70,6 @@ body { -ms-transform: none; transform: none; } -.reveal .slides section .fragment.roll-in { - -webkit-transform: rotateX(60deg); - transform: rotateX(60deg); } - .reveal .slides section .fragment.roll-in.visible { - -webkit-transform: none; - -ms-transform: none; - transform: none; } - .reveal .slides section .fragment.fade-out { opacity: 1; visibility: visible; } diff --git a/css/reveal.scss b/css/reveal.scss index dd7cc75..2ec75e9 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -99,14 +99,6 @@ body { } } -.reveal .slides section .fragment.roll-in { - transform: rotateX( 60deg ); - - &.visible { - transform: none; - } -} - .reveal .slides section .fragment.fade-out { opacity: 1; visibility: visible; diff --git a/index.html b/index.html index f82778d..d4adcf6 100644 --- a/index.html +++ b/index.html @@ -138,7 +138,6 @@

There's different types of fragments, like:

grow

shrink

-

roll-in

fade-out

current-visible

highlight-red

diff --git a/test/test-markdown-element-attributes.html b/test/test-markdown-element-attributes.html index 5dba085..fd44cd2 100644 --- a/test/test-markdown-element-attributes.html +++ b/test/test-markdown-element-attributes.html @@ -38,9 +38,9 @@ Paragraph 2 - - list item 1 - - list item 2 - - list item 3 + - list item 1 + - list item 2 + - list item 3 --- -- cgit v1.2.3 From 80e52c08e9e57dfa782bdb83123ad85a694467c0 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 3 May 2015 19:53:37 -0400 Subject: add test presentation for per-slide transitions, compile css #1106 --- README.md | 4 +- css/reveal.css | 79 ++++++++++++++++++++------- css/reveal.scss | 62 ++++++++++----------- test/examples/slide-transitions.html | 101 +++++++++++++++++++++++++++++++++++ 4 files changed, 195 insertions(+), 51 deletions(-) create mode 100644 test/examples/slide-transitions.html (limited to 'css/reveal.scss') diff --git a/README.md b/README.md index 94a3c5b..929dcc8 100644 --- a/README.md +++ b/README.md @@ -482,7 +482,7 @@ The global presentation transition is set using the ```transition``` config valu
``` -You can as well override only the appearing or the disappearing of the slide: +You can also use different in and out transitions for the same slide: ```html
@@ -988,7 +988,7 @@ Reveal.initialize({ Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability. -## Installation +## Installation The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source. diff --git a/css/reveal.css b/css/reveal.css index 6127a5b..258e975 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -334,30 +334,57 @@ body { .reveal .slides > section.past, .reveal .slides > section.future, .reveal .slides > section > section.past, .reveal .slides > section > section.future { opacity: 0; } +/********************************************* + * Mixins for readability of transitions + *********************************************/ /********************************************* * SLIDE TRANSITION * Aliased 'linear' for backwards compatibility *********************************************/ -.reveal.slide section, .reveal.linear section { +.reveal.slide section { -webkit-backface-visibility: hidden; backface-visibility: hidden; } -.reveal .slides > section[data-transition=slide].past, .reveal.slide .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=linear].past, .reveal.linear .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=slide].past, .reveal .slides > section[data-transition~=slide-out].past, .reveal.slide .slides > section:not([data-transition]).past { -webkit-transform: translate(-150%, 0); -ms-transform: translate(-150%, 0); transform: translate(-150%, 0); } -.reveal .slides > section[data-transition=slide].future, .reveal.slide .slides > section:not([data-transition]).future, .reveal .slides > section[data-transition=linear].future, .reveal.linear .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=slide].future, .reveal .slides > section[data-transition~=slide-in].future, .reveal.slide .slides > section:not([data-transition]).future { -webkit-transform: translate(150%, 0); -ms-transform: translate(150%, 0); transform: translate(150%, 0); } -.reveal .slides > section > section[data-transition=slide].past, .reveal.slide .slides > section > section:not([data-transition]).past, .reveal .slides > section > section[data-transition=linear].past, .reveal.linear .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=slide].past, .reveal .slides > section > section[data-transition~=slide-out].past, .reveal.slide .slides > section > section:not([data-transition]).past { -webkit-transform: translate(0, -150%); -ms-transform: translate(0, -150%); transform: translate(0, -150%); } -.reveal .slides > section > section[data-transition=slide].future, .reveal.slide .slides > section > section:not([data-transition]).future, .reveal .slides > section > section[data-transition=linear].future, .reveal.linear .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=slide].future, .reveal .slides > section > section[data-transition~=slide-in].future, .reveal.slide .slides > section > section:not([data-transition]).future { + -webkit-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + transform: translate(0, 150%); } + +.reveal.linear section { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.reveal .slides > section[data-transition=linear].past, .reveal .slides > section[data-transition~=linear-out].past, .reveal.linear .slides > section:not([data-transition]).past { + -webkit-transform: translate(-150%, 0); + -ms-transform: translate(-150%, 0); + transform: translate(-150%, 0); } + +.reveal .slides > section[data-transition=linear].future, .reveal .slides > section[data-transition~=linear-in].future, .reveal.linear .slides > section:not([data-transition]).future { + -webkit-transform: translate(150%, 0); + -ms-transform: translate(150%, 0); + transform: translate(150%, 0); } + +.reveal .slides > section > section[data-transition=linear].past, .reveal .slides > section > section[data-transition~=linear-out].past, .reveal.linear .slides > section > section:not([data-transition]).past { + -webkit-transform: translate(0, -150%); + -ms-transform: translate(0, -150%); + transform: translate(0, -150%); } + +.reveal .slides > section > section[data-transition=linear].future, .reveal .slides > section > section[data-transition~=linear-in].future, .reveal.linear .slides > section > section:not([data-transition]).future { -webkit-transform: translate(0, 150%); -ms-transform: translate(0, 150%); transform: translate(0, 150%); } @@ -366,38 +393,54 @@ body { * CONVEX TRANSITION * Aliased 'default' for backwards compatibility *********************************************/ -.reveal .slides > section[data-transition=default].past, .reveal.default .slides > section:not([data-transition]).past, .reveal .slides > section[data-transition=convex].past, .reveal.convex .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=default].past, .reveal .slides > section[data-transition~=default-out].past, .reveal.default .slides > section:not([data-transition]).past { + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } + +.reveal .slides > section[data-transition=default].future, .reveal .slides > section[data-transition~=default-in].future, .reveal.default .slides > section:not([data-transition]).future { + -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } + +.reveal .slides > section > section[data-transition=default].past, .reveal .slides > section > section[data-transition~=default-out].past, .reveal.default .slides > section > section:not([data-transition]).past { + -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); + transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } + +.reveal .slides > section > section[data-transition=default].future, .reveal .slides > section > section[data-transition~=default-in].future, .reveal.default .slides > section > section:not([data-transition]).future { + -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); + transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } + +.reveal .slides > section[data-transition=convex].past, .reveal .slides > section[data-transition~=convex-out].past, .reveal.convex .slides > section:not([data-transition]).past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } -.reveal .slides > section[data-transition=default].future, .reveal.default .slides > section:not([data-transition]).future, .reveal .slides > section[data-transition=convex].future, .reveal.convex .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=convex].future, .reveal .slides > section[data-transition~=convex-in].future, .reveal.convex .slides > section:not([data-transition]).future { -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } -.reveal .slides > section > section[data-transition=default].past, .reveal.default .slides > section > section:not([data-transition]).past, .reveal .slides > section > section[data-transition=convex].past, .reveal.convex .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=convex].past, .reveal .slides > section > section[data-transition~=convex-out].past, .reveal.convex .slides > section > section:not([data-transition]).past { -webkit-transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0); } -.reveal .slides > section > section[data-transition=default].future, .reveal.default .slides > section > section:not([data-transition]).future, .reveal .slides > section > section[data-transition=convex].future, .reveal.convex .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=convex].future, .reveal .slides > section > section[data-transition~=convex-in].future, .reveal.convex .slides > section > section:not([data-transition]).future { -webkit-transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0); } /********************************************* * CONCAVE TRANSITION *********************************************/ -.reveal .slides > section[data-transition=concave].past, .reveal.concave .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=concave].past, .reveal .slides > section[data-transition~=concave-out].past, .reveal.concave .slides > section:not([data-transition]).past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } -.reveal .slides > section[data-transition=concave].future, .reveal.concave .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=concave].future, .reveal .slides > section[data-transition~=concave-in].future, .reveal.concave .slides > section:not([data-transition]).future { -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } -.reveal .slides > section > section[data-transition=concave].past, .reveal.concave .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=concave].past, .reveal .slides > section > section[data-transition~=concave-out].past, .reveal.concave .slides > section > section:not([data-transition]).past { -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } -.reveal .slides > section > section[data-transition=concave].future, .reveal.concave .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=concave].future, .reveal .slides > section > section[data-transition~=concave-in].future, .reveal.concave .slides > section > section:not([data-transition]).future { -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); } @@ -408,24 +451,24 @@ body { -webkit-transition-timing-function: ease; transition-timing-function: ease; } -.reveal .slides > section[data-transition=zoom].past, .reveal.zoom .slides > section:not([data-transition]).past { +.reveal .slides > section[data-transition=zoom].past, .reveal .slides > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section:not([data-transition]).past { visibility: hidden; -webkit-transform: scale(16); -ms-transform: scale(16); transform: scale(16); } -.reveal .slides > section[data-transition=zoom].future, .reveal.zoom .slides > section:not([data-transition]).future { +.reveal .slides > section[data-transition=zoom].future, .reveal .slides > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section:not([data-transition]).future { visibility: hidden; -webkit-transform: scale(0.2); -ms-transform: scale(0.2); transform: scale(0.2); } -.reveal .slides > section > section[data-transition=zoom].past, .reveal.zoom .slides > section > section:not([data-transition]).past { +.reveal .slides > section > section[data-transition=zoom].past, .reveal .slides > section > section[data-transition~=zoom-out].past, .reveal.zoom .slides > section > section:not([data-transition]).past { -webkit-transform: translate(0, -150%); -ms-transform: translate(0, -150%); transform: translate(0, -150%); } -.reveal .slides > section > section[data-transition=zoom].future, .reveal.zoom .slides > section > section:not([data-transition]).future { +.reveal .slides > section > section[data-transition=zoom].future, .reveal .slides > section > section[data-transition~=zoom-in].future, .reveal.zoom .slides > section > section:not([data-transition]).future { -webkit-transform: translate(0, 150%); -ms-transform: translate(0, 150%); transform: translate(0, 150%); } @@ -601,7 +644,7 @@ body { /********************************************* * NO TRANSITION *********************************************/ -.reveal .slides section[data-transition=none], .reveal.none .slides section:not([data-transition]) { +.reveal .slides > section[data-transition=none], .reveal.none .slides > section:not([data-transition]) { -webkit-transform: none; -ms-transform: none; transform: none; diff --git a/css/reveal.scss b/css/reveal.scss index 02ba1b4..3321c98 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -432,39 +432,39 @@ body { *********************************************/ @mixin transition-global($style) { - .reveal .slides>section[data-transition=#{$style}], - .reveal.#{$style} .slides>section:not([data-transition]) { - @content; - } + .reveal .slides>section[data-transition=#{$style}], + .reveal.#{$style} .slides>section:not([data-transition]) { + @content; + } } @mixin transition-horizontal-past($style) { - .reveal .slides>section[data-transition=#{$style}].past, - .reveal .slides>section[data-transition~=#{$style}-out].past, - .reveal.#{$style} .slides>section:not([data-transition]).past { - @content; - } + .reveal .slides>section[data-transition=#{$style}].past, + .reveal .slides>section[data-transition~=#{$style}-out].past, + .reveal.#{$style} .slides>section:not([data-transition]).past { + @content; + } } @mixin transition-horizontal-future($style) { - .reveal .slides>section[data-transition=#{$style}].future, - .reveal .slides>section[data-transition~=#{$style}-in].future, - .reveal.#{$style} .slides>section:not([data-transition]).future { - @content; - } + .reveal .slides>section[data-transition=#{$style}].future, + .reveal .slides>section[data-transition~=#{$style}-in].future, + .reveal.#{$style} .slides>section:not([data-transition]).future { + @content; + } } @mixin transition-vertical-past($style) { - .reveal .slides>section>section[data-transition=#{$style}].past, - .reveal .slides>section>section[data-transition~=#{$style}-out].past, - .reveal.#{$style} .slides>section>section:not([data-transition]).past { - @content; - } + .reveal .slides>section>section[data-transition=#{$style}].past, + .reveal .slides>section>section[data-transition~=#{$style}-out].past, + .reveal.#{$style} .slides>section>section:not([data-transition]).past { + @content; + } } @mixin transition-vertical-future($style) { - .reveal .slides>section>section[data-transition=#{$style}].future, - .reveal .slides>section>section[data-transition~=#{$style}-in].future, - .reveal.#{$style} .slides>section>section:not([data-transition]).future { - @content; - } + .reveal .slides>section>section[data-transition=#{$style}].future, + .reveal .slides>section>section[data-transition~=#{$style}-in].future, + .reveal.#{$style} .slides>section>section:not([data-transition]).future { + @content; + } } /********************************************* @@ -533,21 +533,21 @@ body { *********************************************/ @include transition-global(zoom) { - transition-timing-function: ease; + transition-timing-function: ease; } @include transition-horizontal-past(zoom) { - visibility: hidden; - transform: scale(16); + visibility: hidden; + transform: scale(16); } @include transition-horizontal-future(zoom) { - visibility: hidden; - transform: scale(0.2); + visibility: hidden; + transform: scale(0.2); } @include transition-vertical-past(zoom) { - transform: translate(0, -150%); + transform: translate(0, -150%); } @include transition-vertical-future(zoom) { - transform: translate(0, 150%); + transform: translate(0, 150%); } diff --git a/test/examples/slide-transitions.html b/test/examples/slide-transitions.html new file mode 100644 index 0000000..88119dc --- /dev/null +++ b/test/examples/slide-transitions.html @@ -0,0 +1,101 @@ + + + + + + + reveal.js - Slide Transitions + + + + + + + + +
+ +
+ +
+

Default

+
+ +
+

Default

+
+ +
+

data-transition: zoom

+
+ +
+

data-transition: zoom-in fade-out

+
+ +
+

Default

+
+ +
+

data-transition: convex

+
+ +
+

data-transition: convex-in concave-out

+
+ +
+
+

Default

+
+
+

data-transition: concave

+
+
+

data-transition: convex-in fade-out

+
+
+

Default

+
+
+ +
+

data-transition: none

+
+ +
+

Default

+
+ +
+ +
+ + + + + + + + -- cgit v1.2.3 From 242f2d6c964111dc3d9a3dd958f80537a6223f13 Mon Sep 17 00:00:00 2001 From: marcysutton Date: Fri, 5 Jun 2015 14:02:46 -0400 Subject: accessibility: controls as buttons, not divs --- css/reveal.css | 25 ++++++++++++++----------- css/reveal.scss | 26 ++++++++++++++------------ js/reveal.js | 8 ++++---- 3 files changed, 32 insertions(+), 27 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 258e975..a83c155 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -156,58 +156,61 @@ body { bottom: 10px; -webkit-user-select: none; } -.reveal .controls div { +.reveal .controls button { + padding: 0; position: absolute; opacity: 0.05; width: 0; height: 0; + background-color: transparent; border: 12px solid transparent; -webkit-transform: scale(0.9999); -ms-transform: scale(0.9999); transform: scale(0.9999); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; + -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -.reveal .controls div.enabled { +.reveal .controls button.enabled { opacity: 0.7; cursor: pointer; } -.reveal .controls div.enabled:active { +.reveal .controls button.enabled:active { margin-top: 1px; } -.reveal .controls div.navigate-left { +.reveal .controls button.navigate-left { top: 42px; border-right-width: 22px; border-right-color: #000; } -.reveal .controls div.navigate-left.fragmented { +.reveal .controls button.navigate-left.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-right { +.reveal .controls button.navigate-right { left: 74px; top: 42px; border-left-width: 22px; border-left-color: #000; } -.reveal .controls div.navigate-right.fragmented { +.reveal .controls button.navigate-right.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-up { +.reveal .controls button.navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #000; } -.reveal .controls div.navigate-up.fragmented { +.reveal .controls button.navigate-up.fragmented { opacity: 0.3; } -.reveal .controls div.navigate-down { +.reveal .controls button.navigate-down { left: 42px; top: 74px; border-top-width: 22px; border-top-color: #000; } -.reveal .controls div.navigate-down.fragmented { +.reveal .controls button.navigate-down.fragmented { opacity: 0.3; } /********************************************* diff --git a/css/reveal.scss b/css/reveal.scss index 3321c98..a8558a9 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -214,66 +214,68 @@ body { -webkit-user-select: none; } -.reveal .controls div { +.reveal .controls button { + padding: 0; position: absolute; opacity: 0.05; width: 0; height: 0; + background-color: transparent; border: 12px solid transparent; transform: scale(.9999); transition: all 0.2s ease; - + -webkit-appearance: none; -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); } -.reveal .controls div.enabled { +.reveal .controls button.enabled { opacity: 0.7; cursor: pointer; } -.reveal .controls div.enabled:active { +.reveal .controls button.enabled:active { margin-top: 1px; } - .reveal .controls div.navigate-left { + .reveal .controls button.navigate-left { top: 42px; border-right-width: 22px; border-right-color: #000; } - .reveal .controls div.navigate-left.fragmented { + .reveal .controls button.navigate-left.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-right { + .reveal .controls button.navigate-right { left: 74px; top: 42px; border-left-width: 22px; border-left-color: #000; } - .reveal .controls div.navigate-right.fragmented { + .reveal .controls button.navigate-right.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-up { + .reveal .controls button.navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #000; } - .reveal .controls div.navigate-up.fragmented { + .reveal .controls button.navigate-up.fragmented { opacity: 0.3; } - .reveal .controls div.navigate-down { + .reveal .controls button.navigate-down { left: 42px; top: 74px; border-top-width: 22px; border-top-color: #000; } - .reveal .controls div.navigate-down.fragmented { + .reveal .controls button.navigate-down.fragmented { opacity: 0.3; } diff --git a/js/reveal.js b/js/reveal.js index ff5ea53..8964a0c 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -457,10 +457,10 @@ // Arrow controls createSingletonNode( dom.wrapper, 'aside', 'controls', - '
' + - '
' + - '
' + - '
' ); + '' + + '' + + '' + + '' ); // Slide number dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); -- cgit v1.2.3 From c96a5d6ae3e397d4f6000c245cd28f38ce7c7f3d Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 7 Jul 2015 11:37:27 +0200 Subject: fix theme control arrow selectors #1257 --- css/reveal.css | 20 ++++++++++---------- css/reveal.scss | 20 ++++++++++---------- css/theme/beige.css | 16 ++++++++-------- css/theme/black.css | 16 ++++++++-------- css/theme/blood.css | 16 ++++++++-------- css/theme/league.css | 16 ++++++++-------- css/theme/moon.css | 16 ++++++++-------- css/theme/night.css | 16 ++++++++-------- css/theme/serif.css | 16 ++++++++-------- css/theme/simple.css | 16 ++++++++-------- css/theme/sky.css | 16 ++++++++-------- css/theme/solarized.css | 16 ++++++++-------- css/theme/template/theme.scss | 24 ++++++++++++------------ css/theme/white.css | 16 ++++++++-------- 14 files changed, 120 insertions(+), 120 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index a83c155..705d966 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -172,45 +172,45 @@ body { -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -.reveal .controls button.enabled { +.reveal .controls .enabled { opacity: 0.7; cursor: pointer; } -.reveal .controls button.enabled:active { +.reveal .controls .enabled:active { margin-top: 1px; } -.reveal .controls button.navigate-left { +.reveal .controls .navigate-left { top: 42px; border-right-width: 22px; border-right-color: #000; } -.reveal .controls button.navigate-left.fragmented { +.reveal .controls .navigate-left.fragmented { opacity: 0.3; } -.reveal .controls button.navigate-right { +.reveal .controls .navigate-right { left: 74px; top: 42px; border-left-width: 22px; border-left-color: #000; } -.reveal .controls button.navigate-right.fragmented { +.reveal .controls .navigate-right.fragmented { opacity: 0.3; } -.reveal .controls button.navigate-up { +.reveal .controls .navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #000; } -.reveal .controls button.navigate-up.fragmented { +.reveal .controls .navigate-up.fragmented { opacity: 0.3; } -.reveal .controls button.navigate-down { +.reveal .controls .navigate-down { left: 42px; top: 74px; border-top-width: 22px; border-top-color: #000; } -.reveal .controls button.navigate-down.fragmented { +.reveal .controls .navigate-down.fragmented { opacity: 0.3; } /********************************************* diff --git a/css/reveal.scss b/css/reveal.scss index a8558a9..1be6151 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -228,54 +228,54 @@ body { -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); } -.reveal .controls button.enabled { +.reveal .controls .enabled { opacity: 0.7; cursor: pointer; } -.reveal .controls button.enabled:active { +.reveal .controls .enabled:active { margin-top: 1px; } - .reveal .controls button.navigate-left { + .reveal .controls .navigate-left { top: 42px; border-right-width: 22px; border-right-color: #000; } - .reveal .controls button.navigate-left.fragmented { + .reveal .controls .navigate-left.fragmented { opacity: 0.3; } - .reveal .controls button.navigate-right { + .reveal .controls .navigate-right { left: 74px; top: 42px; border-left-width: 22px; border-left-color: #000; } - .reveal .controls button.navigate-right.fragmented { + .reveal .controls .navigate-right.fragmented { opacity: 0.3; } - .reveal .controls button.navigate-up { + .reveal .controls .navigate-up { left: 42px; border-bottom-width: 22px; border-bottom-color: #000; } - .reveal .controls button.navigate-up.fragmented { + .reveal .controls .navigate-up.fragmented { opacity: 0.3; } - .reveal .controls button.navigate-down { + .reveal .controls .navigate-down { left: 42px; top: 74px; border-top-width: 22px; border-top-color: #000; } - .reveal .controls button.navigate-down.fragmented { + .reveal .controls .navigate-down.fragmented { opacity: 0.3; } diff --git a/css/theme/beige.css b/css/theme/beige.css index 8c880a9..56782f2 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -226,28 +226,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #8b743d; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #8b743d; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #8b743d; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #8b743d; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #c0a76e; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #c0a76e; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #c0a76e; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #c0a76e; } /********************************************* diff --git a/css/theme/black.css b/css/theme/black.css index 5ff960e..fce771b 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -222,28 +222,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #42affa; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #42affa; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #42affa; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #42affa; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #8dcffc; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #8dcffc; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #8dcffc; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #8dcffc; } /********************************************* diff --git a/css/theme/blood.css b/css/theme/blood.css index 8d554df..e395936 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -225,28 +225,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #a23; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #a23; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #a23; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #a23; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #dd5567; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #dd5567; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #dd5567; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #dd5567; } /********************************************* diff --git a/css/theme/league.css b/css/theme/league.css index ed1641c..5daa1d3 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -228,28 +228,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #13DAEC; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #13DAEC; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #13DAEC; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #13DAEC; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #71ebf4; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #71ebf4; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #71ebf4; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #71ebf4; } /********************************************* diff --git a/css/theme/moon.css b/css/theme/moon.css index 55e1662..7250cc4 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -226,28 +226,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #268bd2; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #268bd2; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #268bd2; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #268bd2; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #78bae6; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #78bae6; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #78bae6; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #78bae6; } /********************************************* diff --git a/css/theme/night.css b/css/theme/night.css index efaa969..1bc8fbb 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -220,28 +220,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #e7ad52; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #e7ad52; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #e7ad52; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #e7ad52; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #f3d7ac; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #f3d7ac; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #f3d7ac; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #f3d7ac; } /********************************************* diff --git a/css/theme/serif.css b/css/theme/serif.css index 69dbf96..200a985 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -222,28 +222,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #51483D; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #51483D; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #51483D; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #51483D; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #8b7b69; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #8b7b69; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #8b7b69; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #8b7b69; } /********************************************* diff --git a/css/theme/simple.css b/css/theme/simple.css index e63edc2..a6fccd5 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -222,28 +222,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #00008B; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #00008B; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #00008B; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #00008B; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #0000f1; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #0000f1; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #0000f1; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #0000f1; } /********************************************* diff --git a/css/theme/sky.css b/css/theme/sky.css index 99bf027..f422079 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -229,28 +229,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #3b759e; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #3b759e; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #3b759e; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #3b759e; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #74a8cb; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #74a8cb; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #74a8cb; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #74a8cb; } /********************************************* diff --git a/css/theme/solarized.css b/css/theme/solarized.css index 56e8b36..c112696 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -226,28 +226,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #268bd2; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #268bd2; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #268bd2; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #268bd2; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #78bae6; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #78bae6; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #78bae6; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #78bae6; } /********************************************* diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 12edb51..e0e5fb6 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -285,39 +285,39 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, -.reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, +.reveal .controls .navigate-left.enabled { border-right-color: $linkColor; } -.reveal .controls div.navigate-right, -.reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, +.reveal .controls .navigate-right.enabled { border-left-color: $linkColor; } -.reveal .controls div.navigate-up, -.reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, +.reveal .controls .navigate-up.enabled { border-bottom-color: $linkColor; } -.reveal .controls div.navigate-down, -.reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, +.reveal .controls .navigate-down.enabled { border-top-color: $linkColor; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: $linkColorHover; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: $linkColorHover; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: $linkColorHover; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: $linkColorHover; } diff --git a/css/theme/white.css b/css/theme/white.css index 171e719..48754bd 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -222,28 +222,28 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled { +.reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: #2a76dd; } -.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { +.reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: #2a76dd; } -.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { +.reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: #2a76dd; } -.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { +.reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: #2a76dd; } -.reveal .controls div.navigate-left.enabled:hover { +.reveal .controls .navigate-left.enabled:hover { border-right-color: #6ca2e8; } -.reveal .controls div.navigate-right.enabled:hover { +.reveal .controls .navigate-right.enabled:hover { border-left-color: #6ca2e8; } -.reveal .controls div.navigate-up.enabled:hover { +.reveal .controls .navigate-up.enabled:hover { border-bottom-color: #6ca2e8; } -.reveal .controls div.navigate-down.enabled:hover { +.reveal .controls .navigate-down.enabled:hover { border-top-color: #6ca2e8; } /********************************************* -- cgit v1.2.3 From 044e87017d782839b4c599633b565a4db1375334 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 31 Aug 2015 10:55:02 +0200 Subject: fix issue where 'none' transition did not apply to vertical stacks --- css/reveal.css | 4 ++-- css/reveal.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index 705d966..cb5e98b 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -450,7 +450,7 @@ body { /********************************************* * ZOOM TRANSITION *********************************************/ -.reveal .slides > section[data-transition=zoom], .reveal.zoom .slides > section:not([data-transition]) { +.reveal .slides section[data-transition=zoom], .reveal.zoom .slides section:not([data-transition]) { -webkit-transition-timing-function: ease; transition-timing-function: ease; } @@ -647,7 +647,7 @@ body { /********************************************* * NO TRANSITION *********************************************/ -.reveal .slides > section[data-transition=none], .reveal.none .slides > section:not([data-transition]) { +.reveal .slides section[data-transition=none], .reveal.none .slides section:not([data-transition]) { -webkit-transform: none; -ms-transform: none; transform: none; diff --git a/css/reveal.scss b/css/reveal.scss index 1be6151..e1697b1 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -434,8 +434,8 @@ body { *********************************************/ @mixin transition-global($style) { - .reveal .slides>section[data-transition=#{$style}], - .reveal.#{$style} .slides>section:not([data-transition]) { + .reveal .slides section[data-transition=#{$style}], + .reveal.#{$style} .slides section:not([data-transition]) { @content; } } -- cgit v1.2.3 From 983bd5183864939dc4387820960e2ee82f87263a Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 2 Sep 2015 12:46:32 +0200 Subject: fix initial visibility of strike fragments #737 --- css/reveal.css | 3 ++- css/reveal.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'css/reveal.scss') diff --git a/css/reveal.css b/css/reveal.css index cb5e98b..f8505c4 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -85,7 +85,8 @@ body { visibility: visible; } .reveal .slides section .fragment.strike { - opacity: 1; } + opacity: 1; + visibility: visible; } .reveal .slides section .fragment.strike.visible { text-decoration: line-through; } diff --git a/css/reveal.scss b/css/reveal.scss index e1697b1..32187fd 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -121,6 +121,7 @@ body { .reveal .slides section .fragment.strike { opacity: 1; + visibility: visible; &.visible { text-decoration: line-through; -- cgit v1.2.3 From 2ad4065500875f1878ab35c039054e8609b9aaa6 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 9 Sep 2015 14:09:37 +0200 Subject: ability to share presentation with speaker notes #304 --- README.md | 3 +++ css/reveal.css | 28 ++++++++++++++++++++++++++++ css/reveal.scss | 34 ++++++++++++++++++++++++++++++++++ js/reveal.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+) (limited to 'css/reveal.scss') diff --git a/README.md b/README.md index a8c4110..276fd70 100644 --- a/README.md +++ b/README.md @@ -141,6 +141,9 @@ Reveal.initialize({ // key is pressed help: true, + // Flags if speaker notes should be visible to all viewers + showNotes: false, + // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides diff --git a/css/reveal.css b/css/reveal.css index f8505c4..1aaa9b6 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1162,6 +1162,34 @@ body { .reveal aside.notes { display: none; } +.reveal .speaker-notes { + display: none; + position: absolute; + width: 70%; + max-height: 15%; + left: 15%; + bottom: 5%; + padding: 10px; + z-index: 1; + font-size: 18px; + line-height: 1.4; + border: 2px solid #fff; + color: #fff; + background-color: rgba(0, 0, 0, 0.5); + overflow: auto; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +.reveal .speaker-notes.visible:not(:empty) { + display: block; } + +@media screen and (max-width: 800px) { + .reveal .speaker-notes { + width: 90%; + left: 5%; + bottom: 5%; + font-size: 14px; } } + /********************************************* * ZOOM PLUGIN *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 32187fd..9bd570e 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1291,10 +1291,44 @@ body { * SPEAKER NOTES *********************************************/ +// Hide on-page notes .reveal aside.notes { display: none; } +// An interface element that can optionally be used to show the +// speaker notes to all viewers, on top of the presentation +.reveal .speaker-notes { + display: none; + position: absolute; + width: 70%; + max-height: 15%; + left: 15%; + bottom: 5%; + padding: 10px; + z-index: 1; + font-size: 18px; + line-height: 1.4; + border: 2px solid #fff; + color: #fff; + background-color: rgba(0,0,0,0.5); + overflow: auto; + box-sizing: border-box; +} + +.reveal .speaker-notes.visible:not(:empty) { + display: block; +} + +@media screen and (max-width: 800px) { + .reveal .speaker-notes { + width: 90%; + left: 5%; + bottom: 5%; + font-size: 14px; + } +} + /********************************************* * ZOOM PLUGIN diff --git a/js/reveal.js b/js/reveal.js index ad7eaa0..a19e486 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -92,6 +92,9 @@ // Flags if it should be possible to pause the presentation (blackout) pause: true, + // Flags if speaker notes should be visible to all viewers + showNotes: false, + // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides @@ -465,6 +468,9 @@ // Slide number dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); + // Element containing notes that are visible to the audience + dom.speakerNotes = createSingletonNode( dom.wrapper, 'div', 'speaker-notes', null ); + // Overlay graphic which is displayed during the paused mode createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null ); @@ -856,6 +862,13 @@ resume(); } + if( config.showNotes ) { + dom.speakerNotes.classList.add( 'visible' ); + } + else { + dom.speakerNotes.classList.remove( 'visible' ); + } + if( config.mouseWheel ) { document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF document.addEventListener( 'mousewheel', onDocumentMouseScroll, false ); @@ -2161,6 +2174,7 @@ updateBackground(); updateParallax(); updateSlideNumber(); + updateNotes(); // Update the URL hash writeURL(); @@ -2202,6 +2216,7 @@ updateBackground( true ); updateSlideNumber(); updateSlidesVisibility(); + updateNotes(); formatEmbeddedContent(); startEmbeddedContent( currentSlide ); @@ -2450,6 +2465,37 @@ } + /** + * Pick up notes from the current slide and display tham + * to the viewer. + * + * @see `showNotes` config value + */ + function updateNotes() { + + if( config.showNotes && dom.speakerNotes && currentSlide ) { + + var notes = ''; + + // Notes can be specified via the data-notes attribute... + if( currentSlide.hasAttribute( 'data-notes' ) ) { + notes = currentSlide.getAttribute( 'data-notes' ); + } + + // ... or using an