Title: [216359] trunk/Websites/webkit.org
Revision
216359
Author
jcr...@apple.com
Date
2017-05-08 00:56:02 -0700 (Mon, 08 May 2017)

Log Message

2017-05-08  James Craig  <jcr...@apple.com>

        More demo files for prefers-reduced-motion post
        https://bugs.webkit.org/show_bug.cgi?id=170663

        Unreviewed.

        * blog-files/prefers-reduced-motion/jaws.gif: Added.
        * blog-files/prefers-reduced-motion/jaws.jpg: Added.
        * blog-files/prefers-reduced-motion/prm.htm: New animated GIF example.

Modified Paths

Added Paths

Diff

Modified: trunk/Websites/webkit.org/ChangeLog (216358 => 216359)


--- trunk/Websites/webkit.org/ChangeLog	2017-05-08 07:33:57 UTC (rev 216358)
+++ trunk/Websites/webkit.org/ChangeLog	2017-05-08 07:56:02 UTC (rev 216359)
@@ -1,3 +1,14 @@
+2017-05-08  James Craig  <jcr...@apple.com>
+
+        More demo files for prefers-reduced-motion post
+        https://bugs.webkit.org/show_bug.cgi?id=170663
+
+        Unreviewed.
+
+        * blog-files/prefers-reduced-motion/jaws.gif: Added.
+        * blog-files/prefers-reduced-motion/jaws.jpg: Added.
+        * blog-files/prefers-reduced-motion/prm.htm: New animated GIF example.
+
 2017-04-24  James Craig  <jcr...@apple.com>
 
         Upload demo files for prefers-reduced-motion post

Added: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif


(Binary files differ)
Index: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif =================================================================== --- trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif 2017-05-08 07:33:57 UTC (rev 216358) +++ trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif 2017-05-08 07:56:02 UTC (rev 216359) Property changes on: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif ___________________________________________________________________

Added: svn:mime-type

+image/gif \ No newline at end of property

Added: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg


(Binary files differ)
Index: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg =================================================================== --- trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg 2017-05-08 07:33:57 UTC (rev 216358) +++ trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg 2017-05-08 07:56:02 UTC (rev 216359) Property changes on: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg ___________________________________________________________________

Added: svn:mime-type

+image/jpeg \ No newline at end of property

Modified: trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm (216358 => 216359)


--- trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm	2017-05-08 07:33:57 UTC (rev 216358)
+++ trunk/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm	2017-05-08 07:56:02 UTC (rev 216359)
@@ -152,5 +152,21 @@
 
 </script>
 
+
+<h2>Example 4: Only display animated version if prefers-reduced-motion is both supported *and* off.</h2>
+<p>This example uses a more explicit match for <code>(prefers-reduced-motion: no-preference)</code> which excludes all browsers that don't yet support the new feature.</p>
+<img id="jaws" src="" alt="Brody realizing the shark is in the water" width="480" height="214">
+
+<script type="text/_javascript_">
+
+var motionQuery2 = matchMedia('(prefers-reduced-motion: no-preference)'); 
+function handleReduceMotionChanged2() {
+    document.images['jaws'].src = "" ? 'jaws.gif' : 'jaws.jpg';
+}
+handleReduceMotionChanged2(); // trigger this once on load to set up the initial value
+motionQuery.addListener(handleReduceMotionChanged2); // Note: https://webkit.org/b/168491
+
+</script>
+
 </body>
 </html>
\ No newline at end of file
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to