aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md13
-rw-r--r--css/reveal.css27
-rw-r--r--css/reveal.scss13
-rw-r--r--js/reveal.js2
4 files changed, 42 insertions, 13 deletions
diff --git a/README.md b/README.md
index 7ec759a..cd5dcbf 100644
--- a/README.md
+++ b/README.md
@@ -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