Modified: trunk/Websites/webkit.org/ChangeLog (215715 => 215716)
--- trunk/Websites/webkit.org/ChangeLog 2017-04-25 02:53:49 UTC (rev 215715)
+++ trunk/Websites/webkit.org/ChangeLog 2017-04-25 03:21:29 UTC (rev 215716)
@@ -1,3 +1,14 @@
+2017-04-24 James Craig <jcr...@apple.com>
+
+ Upload demo files for prefers-reduced-motion post
+ https://bugs.webkit.org/show_bug.cgi?id=170663
+
+ Rubber stamped by Jon Davis.
+
+ * blog-files/prefers-reduced-motion: Added.
+ * blog-files/prefers-reduced-motion/axi.png: Added.
+ * blog-files/prefers-reduced-motion/prm.htm: Added.
+
2017-04-18 Jon Davis <j...@apple.com>
Images in WebKit.org blog article are stretched out
Added: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm (0 => 215716)
--- trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm (rev 0)
+++ trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm 2017-04-25 03:21:29 UTC (rev 215716)
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Demo: prefers-reduced-motion media query</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style type="text/css">
+html {
+ font: 100% sans-serif;
+ font: -apple-system-body;
+}
+body {
+ font-size: 0.8em;
+ line-height: 1.1;
+}
+
+
+button {
+ cursor: pointer;
+ font-size: 1em;
+ -webkit-appearance: none;
+ border: solid 1px black;
+ color: black;
+ background-color: white;
+ padding: 0;
+ position: relative;
+}
+button::before {
+ display: block;
+ position: absolute;
+ content: " ";
+ top: 50%;
+ left: 50%;
+ width: 1px;
+ height: 1px;
+ opacity: 0;
+ background-color: rgba(255,100,100,0.3);
+ transition-duration: 0.4s;
+ transition-timing-function: ease-in-out;
+
+ /* Example 1: This value will be modified when 'reduce motion' is enabled. */
+ transition-property: top left width height opacity;
+}
+@media (prefers-reduced-motion) {
+ button::before {
+ /* Example 1: Now only animating the opacity... not size or position, which control the scale effect. */
+ transition-property: opacity;
+ }
+}
+button:hover::before, button:focus::before {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity:1;
+}
+button > div {
+ margin: 1.5em 2em;
+}
+
+#twirl {
+ position: relative;
+ border: solid 1px black;
+ overflow: hidden;
+}
+#twirl > div {
+ margin: 1.5em 2em;
+}
+
+@keyframes animation-twirl {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+#twirl::after {
+ width: 2000px;
+ height: 2000px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -1000px;
+ margin-top: -1000px;
+ background: repeating-linear-gradient(140deg, rgba(0,0,0,0), rgba(0,0,0,0) 10px, rgba(200,200,200,0.3) 10px, rgba(200,200,200,0.3) 20px);
+ background-size: cover;
+ content: '';
+ animation: animation-twirl 100s infinite;
+}
+
+/* Example 2: Disabling a ongoing, decorative background animation. */
+@media (prefers-reduced-motion) {
+ #twirl::after {
+ animation: none;
+ }
+}
+
+
+#indicator #prmValue {
+ display: inline-block;
+ padding: 0.2em 0.4em;
+ text-transform: uppercase;
+ border: solid 1px #666;
+ background-color: #eee;
+}
+#indicator a {
+ text-decoration: none;
+}
+
+</style>
+</head>
+<body>
+
+<h1>Reduced Motion Demos</h1>
+
+<p>To test these, enable the "Reduce Motion" setting.</p>
+<ul>
+ <li><strong>iOS:</strong> Settings > General > Accessibility > Reduce Motion</li>
+ <li><strong>macOS:</strong> System Preferences > Accessibility > Display > Reduce Motion</li>
+</ul>
+
+<h2>Example 1: Using CSS to modify an interaction transition-property</h2>
+<!-- Check the 'button::before' blocks in the CSS. -->
+<button>
+ <div>
+ On hover/focus (or tap on mobile), a zoom/scale trigger appears by default,
+ but it uses a simple dissolve when 'reduce motion' is enabled.
+ </div>
+</button>
+
+<h2>Example 2: Using CSS to disable an ongoing, purely decorative animation</h2>
+<!-- Check the '#twirl::after' blocks in the CSS. -->
+<div id="twirl">
+ <div>
+ The spinning background animation is stopped entirely if 'reduce motion' is enabled.
+ </div>
+</div>
+
+
+<h2>Example 3: Using _javascript_ to access the current value</h2>
+<div id="indicator">Prefers reduced motion: <span id="prmValue">unsupported</span> <a href="" title="Outstanding bug: 168491" aria-label="Outstanding bug: 168491"><sup>1</sup></a></div>
+
+<script type="text/_javascript_">
+
+var motionQuery = matchMedia('(prefers-reduced-motion)');
+function handleReduceMotionChanged() {
+ document.getElementById('prmValue').innerText = motionQuery.matches ? 'on' : 'no-preference or unsupported';
+}
+handleReduceMotionChanged(); // trigger this once on load to set up the initial value
+motionQuery.addListener(handleReduceMotionChanged); // Note: https://webkit.org/b/168491
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
