Add reduced-motion keyframes demo.

bennadel · Oct 16, 2021 · b17db24 · b17db24
1 parent 89cfb30
commit b17db24
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS](https://bennadel.github.io/JavaScript-Demos/demos/four-sided-scale-reduced-motion/)
 * [Four-Sided Positioning Plays Nicely With Scale() Transformations In CSS](https://bennadel.github.io/JavaScript-Demos/demos/four-sided-scale/)
 * [Organizing My Application Layers Using Z-Index Stacking Contexts In CSS](https://bennadel.github.io/JavaScript-Demos/demos/z-index-layers/)
 * [Code Kata: Water Breathing Exercise In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/water-breathing/)

diff --git a/demos/four-sided-scale-reduced-motion/demo.css b/demos/four-sided-scale-reduced-motion/demo.css
@@ -0,0 +1,39 @@
+
+body {
+	font-family: sans-serif ;
+	font-size: 18px ;
+}
+
+a.toggle {
+	color: red ;
+	cursor: pointer ;
+	text-decoration: underline ;
+}
+
+.modal {
+	background-color: #333333 ;
+}
+
+.modal::before {
+	border: 2px solid #cccccc ;
+	border-radius: 14px 14px 14px 14px ;
+	bottom: 10px ;
+	content: "" ;
+	left: 10px ;
+	pointer-events: none ;
+	position: absolute ;
+	right: 10px ;
+	top: 10px ;
+}
+
+.modal a.toggle {
+	align-items: center ;
+	bottom: 0px ;
+	color: white ;
+	display: flex ;
+	justify-content: center ;
+	left: 0px ;
+	position: absolute ;
+	right: 0px ;
+	top: 0px ;
+}
diff --git a/demos/four-sided-scale-reduced-motion/index.htm b/demos/four-sided-scale-reduced-motion/index.htm
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS
+	</title>
+	<link rel="stylesheet" type="text/css" href="./demo.css">
+	<style type="text/css">
+
+		.modal {
+			/* Four-sided positioning, plays nicely with scale() transformations. */
+			bottom: 0px ;
+			left: 0px ;
+			position: fixed ;
+			right: 0px ;
+			top: 0px ;
+
+			/*
+				Animating the modal element into view: our modal-enter animation is going
+				to use the REDUCED MOTION animation by default. Then, it will become
+				"progressively enhanced" to use the FULL MOTION animation properties
+				depending on the user's preference.
+			*/
+			animation-duration: 1s ; /* NOTE: Absurdly SLOW for demo purposes. */
+			animation-fill-mode: both ;
+			animation-iteration-count: 1 ;
+			animation-name: modal-enter-reduced-motion ; /* Start with reduced motion. */
+			animation-timing-function: ease-out ;
+		}
+
+		/*
+			If the user has no preference (the default settings in the OS), enhance the
+			modal window to use BOTH the REDUCED MOTION and the FULL MOTION properties.
+		*/
+		@media ( prefers-reduced-motion: no-preference ) {
+			.modal {
+				animation-name:
+					modal-enter-reduced-motion,
+					modal-enter-full-motion
+				;
+			}
+		}
+
+		/* Reduce motion only uses opacity, but DOESN'T MOVE the elements around. */
+		@keyframes modal-enter-reduced-motion {
+			from {
+				opacity: 0 ;
+			}
+			to {
+				opacity: 1 ;
+			}
+		}
+
+		@keyframes modal-enter-full-motion {
+			from {
+				transform: scale( 0.7 ) ;
+			}
+			to {
+				transform: scale( 1.0 ) ;
+			}
+		}
+
+	</style>
+</head>
+<body>
+
+	<h1>
+		Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS
+	</h1>
+
+	<p>
+		<a class="toggle">Open modal</a>
+	</p>
+
+	<!--
+		This modal window will use FIXED positioning and have a four-sided (top, right,
+		bottom, left) arrangement. It will also fade into view using CSS transitions.
+	-->
+	<template>
+		<div class="modal">
+			<a class="toggle">Close modal</a>
+		</div>
+	</template>
+
+
+	<!-- Load scripts. -->
+	<script type="text/javascript" src="../../vendor/jquery/3.6.0/jquery-3.6.0.min.js"></script>
+	<script type="text/javascript">
+
+		var modal = null;
+		var template = $( "template" );
+
+		// We'll use event-delegation so that we can capture the click event in the
+		// modal, which isn't even rendered yet.
+		$( document ).on( "click", ".toggle", toggleModal );
+
+		// I show / hide the modal window by adding it to or removing it from the DOM
+		// (Document Object Model) tree, respectively.
+		function toggleModal() {
+
+			if ( modal ) {
+
+				modal.remove();
+				modal = null;
+
+			} else {
+
+				modal = $( template.prop( "content" ).firstElementChild.cloneNode( true ) )
+					.appendTo( document.body )
+				;
+
+			}
+
+		}
+
+	</script>
+
+</body>
+</html>