Skip to content

Commit b17db24

Browse files
bennadelbennadel
committed
Add reduced-motion keyframes demo.
1 parent 89cfb30 commit b17db24

File tree

3 files changed

+160
-0
lines changed

3 files changed

+160
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS](https://bennadel.github.io/JavaScript-Demos/demos/four-sided-scale-reduced-motion/)
1314
* [Four-Sided Positioning Plays Nicely With Scale() Transformations In CSS](https://bennadel.github.io/JavaScript-Demos/demos/four-sided-scale/)
1415
* [Organizing My Application Layers Using Z-Index Stacking Contexts In CSS](https://bennadel.github.io/JavaScript-Demos/demos/z-index-layers/)
1516
* [Code Kata: Water Breathing Exercise In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/water-breathing/)

‎demos/four-sided-scale-reduced-motion/demo.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
2+
body {
3+
font-family: sans-serif ;
4+
font-size: 18px ;
5+
}
6+
7+
a.toggle {
8+
color: red ;
9+
cursor: pointer ;
10+
text-decoration: underline ;
11+
}
12+
13+
.modal {
14+
background-color: #333333 ;
15+
}
16+
17+
.modal::before {
18+
border: 2px solid #cccccc ;
19+
border-radius: 14px 14px 14px 14px ;
20+
bottom: 10px ;
21+
content: "" ;
22+
left: 10px ;
23+
pointer-events: none ;
24+
position: absolute ;
25+
right: 10px ;
26+
top: 10px ;
27+
}
28+
29+
.modal a.toggle {
30+
align-items: center ;
31+
bottom: 0px ;
32+
color: white ;
33+
display: flex ;
34+
justify-content: center ;
35+
left: 0px ;
36+
position: absolute ;
37+
right: 0px ;
38+
top: 0px ;
39+
}

‎demos/four-sided-scale-reduced-motion/index.htm

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>
6+
Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS
7+
</title>
8+
<link rel="stylesheet" type="text/css" href="./demo.css">
9+
<style type="text/css">
10+
11+
.modal {
12+
/* Four-sided positioning, plays nicely with scale() transformations. */
13+
bottom: 0px ;
14+
left: 0px ;
15+
position: fixed ;
16+
right: 0px ;
17+
top: 0px ;
18+
19+
/*
20+
Animating the modal element into view: our modal-enter animation is going
21+
to use the REDUCED MOTION animation by default. Then, it will become
22+
"progressively enhanced" to use the FULL MOTION animation properties
23+
depending on the user's preference.
24+
*/
25+
animation-duration: 1s ; /* NOTE: Absurdly SLOW for demo purposes. */
26+
animation-fill-mode: both ;
27+
animation-iteration-count: 1 ;
28+
animation-name: modal-enter-reduced-motion ; /* Start with reduced motion. */
29+
animation-timing-function: ease-out ;
30+
}
31+
32+
/*
33+
If the user has no preference (the default settings in the OS), enhance the
34+
modal window to use BOTH the REDUCED MOTION and the FULL MOTION properties.
35+
*/
36+
@media ( prefers-reduced-motion: no-preference ) {
37+
.modal {
38+
animation-name:
39+
modal-enter-reduced-motion,
40+
modal-enter-full-motion
41+
;
42+
}
43+
}
44+
45+
/* Reduce motion only uses opacity, but DOESN'T MOVE the elements around. */
46+
@keyframes modal-enter-reduced-motion {
47+
from {
48+
opacity: 0 ;
49+
}
50+
to {
51+
opacity: 1 ;
52+
}
53+
}
54+
55+
@keyframes modal-enter-full-motion {
56+
from {
57+
transform: scale( 0.7 ) ;
58+
}
59+
to {
60+
transform: scale( 1.0 ) ;
61+
}
62+
}
63+
64+
</style>
65+
</head>
66+
<body>
67+
68+
<h1>
69+
Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS
70+
</h1>
71+
72+
<p>
73+
<a class="toggle">Open modal</a>
74+
</p>
75+
76+
<!--
77+
This modal window will use FIXED positioning and have a four-sided (top, right,
78+
bottom, left) arrangement. It will also fade into view using CSS transitions.
79+
-->
80+
<template>
81+
<div class="modal">
82+
<a class="toggle">Close modal</a>
83+
</div>
84+
</template>
85+
86+
87+
<!-- Load scripts. -->
88+
<script type="text/javascript" src="../../vendor/jquery/3.6.0/jquery-3.6.0.min.js"></script>
89+
<script type="text/javascript">
90+
91+
var modal = null;
92+
var template = $( "template" );
93+
94+
// We'll use event-delegation so that we can capture the click event in the
95+
// modal, which isn't even rendered yet.
96+
$( document ).on( "click", ".toggle", toggleModal );
97+
98+
// I show / hide the modal window by adding it to or removing it from the DOM
99+
// (Document Object Model) tree, respectively.
100+
function toggleModal() {
101+
102+
if ( modal ) {
103+
104+
modal.remove();
105+
modal = null;
106+
107+
} else {
108+
109+
modal = $( template.prop( "content" ).firstElementChild.cloneNode( true ) )
110+
.appendTo( document.body )
111+
;
112+
113+
}
114+
115+
}
116+
117+
</script>
118+
119+
</body>
120+
</html>

0 commit comments

Comments
 (0)