Beispiel:JS-WAAPI-10.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" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>Animieren mit WAAPI - 6</title>
  <style>

#gallery {
  position: relative;
  width: 40em;
  height: 30em;
  margin: 1em auto;
}

#gallery figure {
  position: absolute; 
  width: 100%;
  margin: 0;
  padding: 0;
}

#gallery figcaption {
  position: absolute;
  left: 1em;
  bottom: 1em;
  color: white;
}

#gallery img {
  width: 100%;
  margin: 0;
  padding: 0;  
}

main {
  height: 32em;
  padding: 0;
}

  </style>
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
  <script>
'use strict';  
document.addEventListener('DOMContentLoaded', function () {
 
  var fader = document.querySelector('#gallery figure:last-of-type');
      fader.animate([{
          opacity: '0'
      }, {
          opacity: '1'
      }
      ], {
          duration: 2000,
	  direction: 'alternate',
          iterations: Infinity
      });
	
});
   </script>
</head>
<body>
<h1>Animieren mit WAAPI - 6<br>einfacher Fader mit Element.animate()</h1>
 
<main>
  <div id="gallery">
      <figure>
        <img src="https://wiki.selfhtml.org/images/2/28/Peru-1.jpg" alt="Peru 2007: Cusco - Blick auf Ausangate">
        <figcaption>Cusco - Blick auf Ausangate</figcaption>
      </figure>
      <figure>
        <img src="https://wiki.selfhtml.org/images/4/42/Peru-2.jpg" alt="Peru 2007: Valle Sagrado">
        <figcaption>Terrassen im Valle Sagrado de los Incas</figcaption>
      </figure></div>
  </main>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-WAAPI-10.html&oldid=62761“