Skip to content
GitLab
Commit 617c17be authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

add controlsHint option, animates vertical arrow first time we encounter a vertical slide

parent 58dc6b7c
Hide whitespace changes
Inline Side-by-side
css/reveal.css
View file @ 617c17be
...@@ -188,6 +188,49 @@ body { ...@@ -188,6 +188,49 @@ body {
/********************************************* /*********************************************
* CONTROLS * CONTROLS
*********************************************/ *********************************************/
@-webkit-keyframes bounce-right {
0%, 10%, 25%, 40%, 50% {
-webkit-transform: translateX(0);
transform: translateX(0); }
20% {
-webkit-transform: translateX(10px);
transform: translateX(10px); }
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px); } }
@keyframes bounce-right {
0%, 10%, 25%, 40%, 50% {
-webkit-transform: translateX(0);
transform: translateX(0); }
20% {
-webkit-transform: translateX(10px);
transform: translateX(10px); }
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px); } }
@-webkit-keyframes bounce-down {
0%, 10%, 25%, 40%, 50% {
-webkit-transform: translateY(0);
transform: translateY(0); }
20% {
-webkit-transform: translateY(10px);
transform: translateY(10px); }
30% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px); } }
@keyframes bounce-down {
0%, 10%, 25%, 40%, 50% {
-webkit-transform: translateY(0);
transform: translateY(0); }
20% {
-webkit-transform: translateY(10px);
transform: translateY(10px); }
30% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px); } }
.reveal .controls { .reveal .controls {
display: none; display: none;
position: absolute; position: absolute;
...@@ -201,8 +244,6 @@ body { ...@@ -201,8 +244,6 @@ body {
.reveal .controls button { .reveal .controls button {
position: absolute; position: absolute;
padding: 0; padding: 0;
width: 46px;
height: 46px;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
outline: 0; outline: 0;
...@@ -217,8 +258,8 @@ body { ...@@ -217,8 +258,8 @@ body {
opacity: 0; opacity: 0;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color: transparent; }
.reveal .controls button:before, .reveal .controls .pagination-arrow:before,
.reveal .controls button:after { .reveal .controls .pagination-arrow:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -231,44 +272,58 @@ body { ...@@ -231,44 +272,58 @@ body {
-webkit-transform-origin: 3px 50%; -webkit-transform-origin: 3px 50%;
transform-origin: 3px 50%; transform-origin: 3px 50%;
will-change: transform; } will-change: transform; }
.reveal .controls button:before { .reveal .controls .pagination-arrow {
-webkit-transform: translateX(7px) translateY(20px) rotate(44deg); position: relative;
transform: translateX(7px) translateY(20px) rotate(44deg); } width: 46px;
.reveal .controls button:after { height: 46px; }
-webkit-transform: translateX(7px) translateY(20px) rotate(-44deg); .reveal .controls .pagination-arrow:before {
transform: translateX(7px) translateY(20px) rotate(-44deg); } -webkit-transform: translateX(7px) translateY(20px) rotate(44deg);
.reveal .controls button:hover:before { transform: translateX(7px) translateY(20px) rotate(44deg); }
-webkit-transform: translateX(7px) translateY(20px) rotate(40deg); .reveal .controls .pagination-arrow:after {
transform: translateX(7px) translateY(20px) rotate(40deg); } -webkit-transform: translateX(7px) translateY(20px) rotate(-44deg);
.reveal .controls button:hover:after { transform: translateX(7px) translateY(20px) rotate(-44deg); }
-webkit-transform: translateX(7px) translateY(20px) rotate(-40deg); .reveal .controls .pagination-arrow:hover:before {
transform: translateX(7px) translateY(20px) rotate(-40deg); } -webkit-transform: translateX(7px) translateY(20px) rotate(40deg);
.reveal .controls button:active:before { transform: translateX(7px) translateY(20px) rotate(40deg); }
-webkit-transform: translateX(7px) translateY(20px) rotate(36deg); .reveal .controls .pagination-arrow:hover:after {
transform: translateX(7px) translateY(20px) rotate(36deg); } -webkit-transform: translateX(7px) translateY(20px) rotate(-40deg);
.reveal .controls button:active:after { transform: translateX(7px) translateY(20px) rotate(-40deg); }
-webkit-transform: translateX(7px) translateY(20px) rotate(-36deg); .reveal .controls .pagination-arrow:active:before {
transform: translateX(7px) translateY(20px) rotate(-36deg); } -webkit-transform: translateX(7px) translateY(20px) rotate(36deg);
transform: translateX(7px) translateY(20px) rotate(36deg); }
.reveal .controls .pagination-arrow:active:after {
-webkit-transform: translateX(7px) translateY(20px) rotate(-36deg);
transform: translateX(7px) translateY(20px) rotate(-36deg); }
.reveal .controls .navigate-left { .reveal .controls .navigate-left {
right: 82px; right: 82px;
bottom: 18px; bottom: 18px; }
-webkit-transform: translateY(-50%); .reveal .controls .navigate-left .pagination-arrow {
transform: translateY(-50%); } -webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.reveal .controls .navigate-right { .reveal .controls .navigate-right {
right: 0; right: 0;
bottom: 18px; bottom: 18px; }
-webkit-transform: translateY(-50%) rotate(180deg); .reveal .controls .navigate-right .pagination-arrow {
transform: translateY(-50%) rotate(180deg); } -webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg); }
.reveal .controls .navigate-right.bounce {
-webkit-animation: bounce-right 2s 50 both ease-out;
animation: bounce-right 2s 50 both ease-out; }
.reveal .controls .navigate-up { .reveal .controls .navigate-up {
right: 18px; right: 18px;
bottom: 82px; bottom: 82px; }
-webkit-transform: translateX(-50%) rotate(90deg); .reveal .controls .navigate-up .pagination-arrow {
transform: translateX(-50%) rotate(90deg); } -webkit-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg); }
.reveal .controls .navigate-down { .reveal .controls .navigate-down {
right: 18px; right: 18px;
bottom: 0; bottom: 0; }
-webkit-transform: translateX(-50%) rotate(-90deg); .reveal .controls .navigate-down .pagination-arrow {
transform: translateX(-50%) rotate(-90deg); } -webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); }
.reveal .controls .navigate-down.bounce {
-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, .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,
.reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled { .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {
opacity: 0.3; } opacity: 0.3; }
...@@ -321,12 +376,12 @@ body { ...@@ -321,12 +376,12 @@ body {
.reveal:not(.has-horizontal-slides) .controls .navigate-down { .reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 0; } right: 0; }
.reveal.has-dark-background .controls button:after, .reveal.has-dark-background .controls .pagination-arrow:after,
.reveal.has-dark-background .controls button:before { .reveal.has-dark-background .controls .pagination-arrow:before {
background-color: #fff; } background-color: #fff; }
.reveal.has-light-background .controls button:after, .reveal.has-light-background .controls .pagination-arrow:after,
.reveal.has-light-background .controls button:before { .reveal.has-light-background .controls .pagination-arrow:before {
background-color: #000; } background-color: #000; }
/********************************************* /*********************************************
......
css/reveal.scss
View file @ 617c17be
...@@ -235,6 +235,18 @@ body { ...@@ -235,6 +235,18 @@ body {
* CONTROLS * CONTROLS
*********************************************/ *********************************************/
@keyframes bounce-right {
0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
20% {transform: translateX(10px);}
30% {transform: translateX(-5px);}
}
@keyframes bounce-down {
0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
20% {transform: translateY(10px);}
30% {transform: translateY(-5px);}
}
.reveal .controls { .reveal .controls {
$size: 46px; $size: 46px;
$length: floor($size * 0.7); $length: floor($size * 0.7);
...@@ -268,8 +280,6 @@ body { ...@@ -268,8 +280,6 @@ body {
button { button {
position: absolute; position: absolute;
padding: 0; padding: 0;
width: $size;
height: $size;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
outline: 0; outline: 0;
...@@ -287,8 +297,8 @@ body { ...@@ -287,8 +297,8 @@ body {
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
} }
button:before, .pagination-arrow:before,
button:after { .pagination-arrow:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -303,7 +313,11 @@ body { ...@@ -303,7 +313,11 @@ body {
will-change: transform; will-change: transform;
} }
button { .pagination-arrow {
position: relative;
width: $size;
height: $size;
@include arrowTransform( $angle ); @include arrowTransform( $angle );
&:hover { &:hover {
...@@ -318,25 +332,45 @@ body { ...@@ -318,25 +332,45 @@ body {
.navigate-left { .navigate-left {
right: $size + $innerSpacing*2; right: $size + $innerSpacing*2;
bottom: $innerSpacing; bottom: $innerSpacing;
transform: translateY(-50%);
.pagination-arrow {
transform: translateY(-50%);
}
} }
.navigate-right { .navigate-right {
right: 0; right: 0;
bottom: $innerSpacing; bottom: $innerSpacing;
transform: translateY(-50%) rotate( 180deg );
.pagination-arrow {
transform: translateY(-50%) rotate( 180deg );
}
&.bounce {
animation: bounce-right 2s 50 both ease-out;
}
} }
.navigate-up { .navigate-up {
right: $innerSpacing; right: $innerSpacing;
bottom: $size + $innerSpacing*2; bottom: $size + $innerSpacing*2;
transform: translateX(-50%) rotate( 90deg );
.pagination-arrow {
transform: translateX(-50%) rotate( 90deg );
}
} }
.navigate-down { .navigate-down {
right: $innerSpacing; right: $innerSpacing;
bottom: 0; bottom: 0;
transform: translateX(-50%) rotate( -90deg );
.pagination-arrow {
transform: translateX(-50%) rotate( -90deg );
}
&.bounce {
animation: bounce-down 2s 50 both ease-out;
}
} }
// Back arrow style: "faded": // Back arrow style: "faded":
...@@ -432,13 +466,13 @@ body { ...@@ -432,13 +466,13 @@ body {
right: 0; right: 0;
} }
.reveal.has-dark-background .controls button:after, .reveal.has-dark-background .controls .pagination-arrow:after,
.reveal.has-dark-background .controls button:before { .reveal.has-dark-background .controls .pagination-arrow:before {
background-color: #fff; background-color: #fff;
} }
.reveal.has-light-background .controls button:after, .reveal.has-light-background .controls .pagination-arrow:after,
.reveal.has-light-background .controls button:before { .reveal.has-light-background .controls .pagination-arrow:before {
background-color: #000; background-color: #000;
} }
......
js/reveal.js
View file @ 617c17be
...@@ -52,11 +52,15 @@ ...@@ -52,11 +52,15 @@
// Display controls in the bottom right corner // Display controls in the bottom right corner
controls: true, 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" // Determines where controls appear, "edges" or "bottom-right"
controlsLayout: 'bottom-right', controlsLayout: 'bottom-right',
// Specifies the display rules for backwards navigation arrows; // Visibility rule for backwards navigation arrows; "faded", "hidden"
// "faded", "hidden" or "visible" // or "visible"
controlsBackArrows: 'faded', controlsBackArrows: 'faded',
// Display a presentation progress bar // Display a presentation progress bar
...@@ -214,6 +218,10 @@ ...@@ -214,6 +218,10 @@
previousBackground, previousBackground,
// Remember which directions that the user has navigated towards
hasNavigatedRight = false,
hasNavigatedDown = false,
// Slides may hold a data-state attribute which we pick up and apply // Slides may hold a data-state attribute which we pick up and apply
// as a class to the body. This list contains the combined state of // as a class to the body. This list contains the combined state of
// all current slides. // all current slides.
...@@ -524,10 +532,10 @@ ...@@ -524,10 +532,10 @@
// Arrow controls // Arrow controls
dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls', dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
'<button class="navigate-left" aria-label="previous slide"></button>' + '<button class="navigate-left" aria-label="previous slide"><div class="pagination-arrow"></div></button>' +
'<button class="navigate-right" aria-label="next slide"></button>' + '<button class="navigate-right" aria-label="next slide"><div class="pagination-arrow"></div></button>' +
'<button class="navigate-up" aria-label="above slide"></button>' + '<button class="navigate-up" aria-label="above slide"><div class="pagination-arrow"></div></button>' +
'<button class="navigate-down" aria-label="below slide"></button>' ); '<button class="navigate-down" aria-label="below slide"><div class="pagination-arrow"></div></button>' );
// Slide number // Slide number
dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
...@@ -550,6 +558,10 @@ ...@@ -550,6 +558,10 @@
dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) ); dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) ); dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
// The right and down arrows in the standard reveal.js controls
dom.controlsRightArrow = dom.controls.querySelector( '.navigate-right' );
dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' );
dom.statusDiv = createStatusDiv(); dom.statusDiv = createStatusDiv();
} }
...@@ -2905,6 +2917,26 @@ ...@@ -2905,6 +2917,26 @@
} }
if( config.controlsHints ) {
// Highlight control arrows with an animation to ensure
// that the viewer knows how to navigate
if( !hasNavigatedDown && routes.down ) {
dom.controlsDownArrow.classList.add( 'highlight' );
}
else {
dom.controlsDownArrow.classList.remove( 'highlight' );
if( !hasNavigatedRight && routes.right && indexh === 0 ) {
dom.controlsRightArrow.classList.add( 'highlight' );
}
else {
dom.controlsRightArrow.classList.remove( 'highlight' );
}
}
}
} }
/** /**
...@@ -4157,6 +4189,8 @@ ...@@ -4157,6 +4189,8 @@
function navigateRight() { function navigateRight() {
hasNavigatedRight = true;
// Reverse for RTL // Reverse for RTL
if( config.rtl ) { if( config.rtl ) {
if( ( isOverview() || previousFragment() === false ) && availableRoutes().right ) { if( ( isOverview() || previousFragment() === false ) && availableRoutes().right ) {
...@@ -4181,6 +4215,8 @@ ...@@ -4181,6 +4215,8 @@
function navigateDown() { function navigateDown() {
hasNavigatedDown = true;
// Prioritize revealing fragments // Prioritize revealing fragments
if( ( isOverview() || nextFragment() === false ) && availableRoutes().down ) { if( ( isOverview() || nextFragment() === false ) && availableRoutes().down ) {
slide( indexh, indexv + 1 ); slide( indexh, indexv + 1 );
...@@ -4227,6 +4263,9 @@ ...@@ -4227,6 +4263,9 @@
*/ */
function navigateNext() { function navigateNext() {
hasNavigatedRight = true;
hasNavigatedDown = true;
// Prioritize revealing fragments // Prioritize revealing fragments
if( nextFragment() === false ) { if( nextFragment() === false ) {
if( availableRoutes().down ) { if( availableRoutes().down ) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment