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

1 files changed, 47 insertions, 13 deletions

diff --git a/css/reveal.scss b/css/reveal.scss
index 8785d4a..6209486 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -235,6 +235,18 @@ body {
  * 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 {
 	$size: 46px;
 	$length: floor($size * 0.7);
@@ -268,8 +280,6 @@ body {
 	button {
 		position: absolute;
 		padding: 0;
-		width: $size;
-		height: $size;
 		background-color: transparent;
 		border: 0;
 		outline: 0;
@@ -287,8 +297,8 @@ body {
 		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
 	}
 
-	button:before,
-	button:after {
+	.pagination-arrow:before,
+	.pagination-arrow:after {
 		content: '';
 		position: absolute;
 		top: 0;
@@ -303,7 +313,11 @@ body {
 		will-change: transform;
 	}
 
-	button {
+	.pagination-arrow {
+		position: relative;
+		width: $size;
+		height: $size;
+
 		@include arrowTransform( $angle );
 
 		&:hover {
@@ -318,25 +332,45 @@ body {
 	.navigate-left {
 		right: $size + $innerSpacing*2;
 		bottom: $innerSpacing;
-		transform: translateY(-50%);
+
+		.pagination-arrow {
+			transform: translateY(-50%);
+		}
 	}
 
 	.navigate-right {
 		right: 0;
 		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 {
 		right: $innerSpacing;
 		bottom: $size + $innerSpacing*2;
-		transform: translateX(-50%) rotate( 90deg );
+
+		.pagination-arrow {
+			transform: translateX(-50%) rotate( 90deg );
+		}
 	}
 
 	.navigate-down {
 		right: $innerSpacing;
 		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":
@@ -432,13 +466,13 @@ body {
 	right: 0;
 }
 
-.reveal.has-dark-background .controls button:after,
-.reveal.has-dark-background .controls button:before {
+.reveal.has-dark-background .controls .pagination-arrow:after,
+.reveal.has-dark-background .controls .pagination-arrow:before {
 	background-color: #fff;
 }
 
-.reveal.has-light-background .controls button:after,
-.reveal.has-light-background .controls button:before {
+.reveal.has-light-background .controls .pagination-arrow:after,
+.reveal.has-light-background .controls .pagination-arrow:before {
 	background-color: #000;
 }