Skip to content

Commit fa6730f

Browse files
bennadelbennadel
committed
Adding alternate approaches.
1 parent b17db24 commit fa6730f

File tree

2 files changed

+221
-0
lines changed

2 files changed

+221
-0
lines changed

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

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
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+
/* Animating the modal element into view. */
20+
animation-duration: 1s ; /* NOTE: Absurdly SLOW for demo purposes. */
21+
animation-fill-mode: both ;
22+
animation-iteration-count: 1 ;
23+
animation-name: modal-enter ;
24+
animation-timing-function: ease-out ;
25+
}
26+
27+
/* By default, we'll use the REDUCED MOTION version of the animation. */
28+
@keyframes modal-enter {
29+
from {
30+
opacity: 0 ;
31+
}
32+
to {
33+
opacity: 1 ;
34+
}
35+
}
36+
37+
/*
38+
Then, if the user has NO PREFERENCE for motion, we can OVERRIDE the
39+
animation definition to include both the motion and non-motion properties.
40+
*/
41+
@media ( prefers-reduced-motion: no-preference ) {
42+
@keyframes modal-enter {
43+
from {
44+
opacity: 0 ;
45+
transform: scale( 0.7 ) ;
46+
}
47+
to {
48+
opacity: 1 ;
49+
transform: scale( 1.0 ) ;
50+
}
51+
}
52+
}
53+
54+
</style>
55+
</head>
56+
<body>
57+
58+
<h1>
59+
Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS
60+
</h1>
61+
62+
<p>
63+
<a class="toggle">Open modal</a>
64+
</p>
65+
66+
<!--
67+
This modal window will use FIXED positioning and have a four-sided (top, right,
68+
bottom, left) arrangement. It will also fade into view using CSS transitions.
69+
-->
70+
<template>
71+
<div class="modal">
72+
<a class="toggle">Close modal</a>
73+
</div>
74+
</template>
75+
76+
77+
<!-- Load scripts. -->
78+
<script type="text/javascript" src="../../vendor/jquery/3.6.0/jquery-3.6.0.min.js"></script>
79+
<script type="text/javascript">
80+
81+
var modal = null;
82+
var template = $( "template" );
83+
84+
// We'll use event-delegation so that we can capture the click event in the
85+
// modal, which isn't even rendered yet.
86+
$( document ).on( "click", ".toggle", toggleModal );
87+
88+
// I show / hide the modal window by adding it to or removing it from the DOM
89+
// (Document Object Model) tree, respectively.
90+
function toggleModal() {
91+
92+
if ( modal ) {
93+
94+
modal.remove();
95+
modal = null;
96+
97+
} else {
98+
99+
modal = $( template.prop( "content" ).firstElementChild.cloneNode( true ) )
100+
.appendTo( document.body )
101+
;
102+
103+
}
104+
105+
}
106+
107+
</script>
108+
109+
</body>
110+
</html>

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

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
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+
/* Animating the modal element into view. */
20+
animation-duration: 1s ; /* NOTE: Absurdly SLOW for demo purposes. */
21+
animation-fill-mode: both ;
22+
animation-iteration-count: 1 ;
23+
animation-name: modal-enter ;
24+
animation-timing-function: ease-out ;
25+
}
26+
27+
/* By default, we'll use the REDUCED MOTION version of the animation. */
28+
:root {
29+
--scale-start: 1.0 ;
30+
--scale-end: 1.0 ;
31+
}
32+
33+
/*
34+
Then, if the user has NO PREFERENCE for motion, we can OVERRIDE the
35+
animation definition to include both the motion and non-motion properties.
36+
*/
37+
@media ( prefers-reduced-motion: no-preference ) {
38+
:root {
39+
--scale-start: 0.7 ;
40+
--scale-end: 1.0 ;
41+
}
42+
}
43+
44+
@keyframes modal-enter {
45+
from {
46+
opacity: 0 ;
47+
transform: scale( var( --scale-start ) ) ;
48+
}
49+
to {
50+
opacity: 1 ;
51+
transform: scale( var( --scale-end ) ) ;
52+
}
53+
}
54+
55+
</style>
56+
</head>
57+
<body>
58+
59+
<h1>
60+
Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS
61+
</h1>
62+
63+
<p>
64+
<a class="toggle">Open modal</a>
65+
</p>
66+
67+
<!--
68+
This modal window will use FIXED positioning and have a four-sided (top, right,
69+
bottom, left) arrangement. It will also fade into view using CSS transitions.
70+
-->
71+
<template>
72+
<div class="modal">
73+
<a class="toggle">Close modal</a>
74+
</div>
75+
</template>
76+
77+
78+
<!-- Load scripts. -->
79+
<script type="text/javascript" src="../../vendor/jquery/3.6.0/jquery-3.6.0.min.js"></script>
80+
<script type="text/javascript">
81+
82+
var modal = null;
83+
var template = $( "template" );
84+
85+
// We'll use event-delegation so that we can capture the click event in the
86+
// modal, which isn't even rendered yet.
87+
$( document ).on( "click", ".toggle", toggleModal );
88+
89+
// I show / hide the modal window by adding it to or removing it from the DOM
90+
// (Document Object Model) tree, respectively.
91+
function toggleModal() {
92+
93+
if ( modal ) {
94+
95+
modal.remove();
96+
modal = null;
97+
98+
} else {
99+
100+
modal = $( template.prop( "content" ).firstElementChild.cloneNode( true ) )
101+
.appendTo( document.body )
102+
;
103+
104+
}
105+
106+
}
107+
108+
</script>
109+
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)