Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit fa6730f

Browse filesBrowse files
bennadelbennadel
committed
Adding alternate approaches.
1 parent b17db24 commit fa6730f
Copy full SHA for fa6730f

File tree

Expand file treeCollapse file tree

2 files changed

+221
-0
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

2 files changed

+221
-0
lines changed
Open diff view settings
Collapse file

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

Copy file name to clipboard
+110Lines changed: 110 additions & 0 deletions
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>
Collapse file

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

Copy file name to clipboard
+111Lines changed: 111 additions & 0 deletions
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.