Commit 9e013ccb authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

in/out transitions for controls

parent 617c17be
...@@ -181,9 +181,20 @@ At the end of your page you need to initialize reveal by running the following c ...@@ -181,9 +181,20 @@ At the end of your page you need to initialize reveal by running the following c
```javascript ```javascript
Reveal.initialize({ Reveal.initialize({
// Display controls in the bottom right corner // Display presentation control arrows
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"
controlsLayout: 'bottom-right',
// Visibility rule for backwards navigation arrows; "faded", "hidden"
// or "visible"
controlsBackArrows: 'faded',
// Display a presentation progress bar // Display a presentation progress bar
progress: true, progress: true,
......
...@@ -251,7 +251,8 @@ body { ...@@ -251,7 +251,8 @@ body {
color: currentColor; color: currentColor;
-webkit-transform: scale(0.9999); -webkit-transform: scale(0.9999);
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; z-index: 2;
pointer-events: auto; pointer-events: auto;
visibility: hidden; visibility: hidden;
...@@ -296,32 +297,40 @@ body { ...@@ -296,32 +297,40 @@ body {
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: translateX(-10px);
transform: translateX(-10px); }
.reveal .controls .navigate-left .pagination-arrow { .reveal .controls .navigate-left .pagination-arrow {
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
transform: translateY(-50%); } transform: translateY(-50%); }
.reveal .controls .navigate-right { .reveal .controls .navigate-right {
right: 0; right: 0;
bottom: 18px; } bottom: 18px;
-webkit-transform: translateX(10px);
transform: translateX(10px); }
.reveal .controls .navigate-right .pagination-arrow { .reveal .controls .navigate-right .pagination-arrow {
-webkit-transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg);
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; -webkit-animation: bounce-right 2s 50 both ease-out;
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: translateY(-10px);
transform: translateY(-10px); }
.reveal .controls .navigate-up .pagination-arrow { .reveal .controls .navigate-up .pagination-arrow {
-webkit-transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg);
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: translateY(10px);
transform: translateY(10px); }
.reveal .controls .navigate-down .pagination-arrow { .reveal .controls .navigate-down .pagination-arrow {
-webkit-transform: translateX(-50%) rotate(-90deg); -webkit-transform: translateX(-50%) rotate(-90deg);
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; -webkit-animation: bounce-down 2s 50 both ease-out;
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,
...@@ -337,7 +346,9 @@ body { ...@@ -337,7 +346,9 @@ body {
.reveal .controls .enabled { .reveal .controls .enabled {
visibility: visible; visibility: visible;
opacity: 0.7; opacity: 0.7;
cursor: pointer; } cursor: pointer;
-webkit-transform: none;
transform: none; }
.reveal .controls .enabled.fragmented { .reveal .controls .enabled.fragmented {
opacity: 0.3; } opacity: 0.3; }
.reveal .controls .enabled:hover, .reveal .controls .enabled:hover,
......
...@@ -286,7 +286,9 @@ body { ...@@ -286,7 +286,9 @@ body {
cursor: pointer; cursor: pointer;
color: currentColor; color: currentColor;
transform: scale(.9999); 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 z-index: 2; // above slides
pointer-events: auto; pointer-events: auto;
...@@ -332,6 +334,7 @@ body { ...@@ -332,6 +334,7 @@ body {
.navigate-left { .navigate-left {
right: $size + $innerSpacing*2; right: $size + $innerSpacing*2;
bottom: $innerSpacing; bottom: $innerSpacing;
transform: translateX( -10px );
.pagination-arrow { .pagination-arrow {
transform: translateY(-50%); transform: translateY(-50%);
...@@ -341,12 +344,13 @@ body { ...@@ -341,12 +344,13 @@ body {
.navigate-right { .navigate-right {
right: 0; right: 0;
bottom: $innerSpacing; bottom: $innerSpacing;
transform: translateX( 10px );
.pagination-arrow { .pagination-arrow {
transform: translateY(-50%) rotate( 180deg ); transform: translateY(-50%) rotate( 180deg );
} }
&.bounce { &.highlight {
animation: bounce-right 2s 50 both ease-out; animation: bounce-right 2s 50 both ease-out;
} }
} }
...@@ -354,6 +358,7 @@ body { ...@@ -354,6 +358,7 @@ body {
.navigate-up { .navigate-up {
right: $innerSpacing; right: $innerSpacing;
bottom: $size + $innerSpacing*2; bottom: $size + $innerSpacing*2;
transform: translateY( -10px );
.pagination-arrow { .pagination-arrow {
transform: translateX(-50%) rotate( 90deg ); transform: translateX(-50%) rotate( 90deg );
...@@ -363,12 +368,13 @@ body { ...@@ -363,12 +368,13 @@ body {
.navigate-down { .navigate-down {
right: $innerSpacing; right: $innerSpacing;
bottom: 0; bottom: 0;
transform: translateY( 10px );
.pagination-arrow { .pagination-arrow {
transform: translateX(-50%) rotate( -90deg ); transform: translateX(-50%) rotate( -90deg );
} }
&.bounce { &.highlight {
animation: bounce-down 2s 50 both ease-out; animation: bounce-down 2s 50 both ease-out;
} }
} }
...@@ -398,6 +404,7 @@ body { ...@@ -398,6 +404,7 @@ body {
visibility: visible; visibility: visible;
opacity: 0.7; opacity: 0.7;
cursor: pointer; cursor: pointer;
transform: none;
} }
// Any control button that leads to showing or hiding // Any control button that leads to showing or hiding
......
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
minScale: 0.2, minScale: 0.2,
maxScale: 2.0, maxScale: 2.0,
// Display controls in the bottom right corner // Display presentation control arrows
controls: true, controls: true,
// Hint at where the user can navigate, for example by animating // Hint at where the user can navigate, for example by animating
......
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