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.
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@216359
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
+2017-05-08 James Craig <jcraig@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 <jcraig@apple.com>
Upload demo files for prefers-reduced-motion post
</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="jaws.jpg" 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 = motionQuery2.matches ? '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