Beispiel:HTML-picture-prefers-reduced-motion.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
    <title>Animierte GIFs auf Benutzerwunsch als Screenshot</title>
    <style>
body{ padding: 1em;}
picture  img {
  width: 400px;
}
	  
    </style>
</head>
<body>
  <h1>animierte GIFs - responsiv</h1>

<picture>
  <source srcset="https://upload.wikimedia.org/wikipedia/commons/1/12/CG_Heart.gif" 
          media="(prefers-reduced-motion: no-preference)">
  <img src="https://wiki.selfhtml.org/images/4/45/Heart-screenshot.png" 
       alt="Computergenerierter Querschnitt eines 3D-Modell des Herzen">
</picture>

<p>In diesem Beispiel wird abgefragt, ob der Nutzer Animationen wünscht. Falls keine Festlegung getroffen wurde, wird das animated GIF gezeigt. Falls der Wert <code>reduce</code> gesetzt wurde, wird ein statischer Screenshot gezeigt.
<p>Noch besser wäre eine Einbindung als Film (siehe <a href="https://upload.wikimedia.org/wikipedia/commons/3/3f/CG_heart_90fps.webm">Datei als webm</a>), da dieser dann vom Nutzer gestartet und beliebig gestoppt werden kann.

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML-picture-prefers-reduced-motion.html&oldid=86206“