mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-22 06:13:41 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hakim El Hattab
2017-05-16 15:04:32 +02:00
parent 58dc6b7c36
commit 617c17be3c
3 changed files with 185 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
css/reveal.scss
View File

@@ -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;
}