diff options
| -rw-r--r-- | README.md | 13 | ||||
| -rw-r--r-- | css/reveal.css | 27 | ||||
| -rw-r--r-- | css/reveal.scss | 13 | ||||
| -rw-r--r-- | js/reveal.js | 2 |
4 files changed, 42 insertions, 13 deletions
@@ -181,9 +181,20 @@ At the end of your page you need to initialize reveal by running the following c ```javascript Reveal.initialize({ - // Display controls in the bottom right corner + // Display presentation control arrows controls: true, + // Hint at where the user can navigate, for example by animating + // the down arrow when we first encounter a vertical slide + controlsHints: true, + + // Determines where controls appear, "edges" or "bottom-right" + controlsLayout: 'bottom-right', + + // Visibility rule for backwards navigation arrows; "faded", "hidden" + // or "visible" + controlsBackArrows: 'faded', + // Display a presentation progress bar progress: true, diff --git a/css/reveal.css b/css/reveal.css index 9967c2a..14c87f0 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -251,7 +251,8 @@ body { color: currentColor; -webkit-transform: scale(0.9999); transform: scale(0.9999); - transition: all 0.2s ease; + transition: color 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease; + transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; z-index: 2; pointer-events: auto; visibility: hidden; @@ -296,32 +297,40 @@ body { transform: translateX(7px) translateY(20px) rotate(-36deg); } .reveal .controls .navigate-left { right: 82px; - bottom: 18px; } + bottom: 18px; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); } .reveal .controls .navigate-left .pagination-arrow { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .reveal .controls .navigate-right { right: 0; - bottom: 18px; } + bottom: 18px; + -webkit-transform: translateX(10px); + transform: translateX(10px); } .reveal .controls .navigate-right .pagination-arrow { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } - .reveal .controls .navigate-right.bounce { + .reveal .controls .navigate-right.highlight { -webkit-animation: bounce-right 2s 50 both ease-out; animation: bounce-right 2s 50 both ease-out; } .reveal .controls .navigate-up { right: 18px; - bottom: 82px; } + bottom: 82px; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); } .reveal .controls .navigate-up .pagination-arrow { -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } .reveal .controls .navigate-down { right: 18px; - bottom: 0; } + bottom: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); } .reveal .controls .navigate-down .pagination-arrow { -webkit-transform: translateX(-50%) rotate(-90deg); transform: translateX(-50%) rotate(-90deg); } - .reveal .controls .navigate-down.bounce { + .reveal .controls .navigate-down.highlight { -webkit-animation: bounce-down 2s 50 both ease-out; animation: bounce-down 2s 50 both ease-out; } .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled, @@ -337,7 +346,9 @@ body { .reveal .controls .enabled { visibility: visible; opacity: 0.7; - cursor: pointer; } + cursor: pointer; + -webkit-transform: none; + transform: none; } .reveal .controls .enabled.fragmented { opacity: 0.3; } .reveal .controls .enabled:hover, diff --git a/css/reveal.scss b/css/reveal.scss index 6209486..4d5e889 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -286,7 +286,9 @@ body { cursor: pointer; color: currentColor; transform: scale(.9999); - transition: all 0.2s ease; + transition: color 0.2s ease, + opacity 0.2s ease, + transform 0.2s ease; z-index: 2; // above slides pointer-events: auto; @@ -332,6 +334,7 @@ body { .navigate-left { right: $size + $innerSpacing*2; bottom: $innerSpacing; + transform: translateX( -10px ); .pagination-arrow { transform: translateY(-50%); @@ -341,12 +344,13 @@ body { .navigate-right { right: 0; bottom: $innerSpacing; + transform: translateX( 10px ); .pagination-arrow { transform: translateY(-50%) rotate( 180deg ); } - &.bounce { + &.highlight { animation: bounce-right 2s 50 both ease-out; } } @@ -354,6 +358,7 @@ body { .navigate-up { right: $innerSpacing; bottom: $size + $innerSpacing*2; + transform: translateY( -10px ); .pagination-arrow { transform: translateX(-50%) rotate( 90deg ); @@ -363,12 +368,13 @@ body { .navigate-down { right: $innerSpacing; bottom: 0; + transform: translateY( 10px ); .pagination-arrow { transform: translateX(-50%) rotate( -90deg ); } - &.bounce { + &.highlight { animation: bounce-down 2s 50 both ease-out; } } @@ -398,6 +404,7 @@ body { visibility: visible; opacity: 0.7; cursor: pointer; + transform: none; } // Any control button that leads to showing or hiding diff --git a/js/reveal.js b/js/reveal.js index d39e288..96177fe 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -49,7 +49,7 @@ minScale: 0.2, maxScale: 2.0, - // Display controls in the bottom right corner + // Display presentation control arrows controls: true, // Hint at where the user can navigate, for example by animating |