Beispiel:JS-WAAPI-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<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>Animationen mit WAAPI - 4</title>
<style>
.container { /* wird erst per JS aktiviert */
max-width: 60em;
height: 40em;
overflow: hidden;
}
#gallery {
}
#gallery figure {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#gallery figcaption {
position: absolute;
left: 1em;
top: 1em;
color: white;
}
#gallery img {
width: 100%;
margin: 0;
padding: 0;
}
.changer {
postion: absolute;
display: flex;
align-items: center;
justify-content: center;
max-width: 6000px;
}
.changer figure {
display: inline-block;
width: 60em;
}
main {
padding: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
// activate control buttons
document.querySelector('#back').addEventListener('click', runBackwards);
document.querySelector('#play').addEventListener('click', togglePlayPause);
document.querySelector('#forward').addEventListener('click', runForwards);
// Auswahl des Bildwechslers und seiner Kindelemente
var changer = document.querySelector( '#gallery' ),
children = changer.querySelectorAll( 'figure'),
container = document.querySelector( '#container'),
newWidth = (children.length* 100) + '%';
// sets container, puts figure-elements horizontal
container.classList.add('container');
changer.classList.add('changer');
changer.style.width = newWidth;
var newMargin = ((children.length-1)* -100) + '%';
// animate changer
var marquee = changer.animate([{
marginLeft: '0%'
}, {
marginLeft: newMargin
}
], {
duration: children.length * 3000,
direction: 'normal',
iterations: Infinity,
playbackRate : 1
});
// now for the playing/pausing
changer.addEventListener('mouseenter', pauseMarquee, false);
changer.addEventListener('mouseleave', playMarquee, false);
// pretty self-explanatory
function playMarquee(){
if( marquee.playState === 'paused' ) marquee.play();
}
// pretty self-explanatory
function pauseMarquee(){
if( marquee.playState === 'running' ) marquee.pause();
}
function runBackwards () {
document.querySelector('output').innerText = ' Huhu, rückwärts ';
marquee.playbackRate = -3;
}
function runForwards () {
document.querySelector('output').innerText = ' Huhu, vorwärts ';
marquee.playbackRate = 3;
}
function togglePlayPause () {
document.querySelector('output').innerText = ' togglePlayPause';
if (document.querySelector('#play').textContent == '❙❙') {
document.querySelector('output').innerText = ' Pause';
document.querySelector('#play').textContent = '►';
marquee.pause();
} else {
document.querySelector('output').innerText = ' Play';
document.querySelector('#play').textContent = '❙❙';
marquee.play();
marquee.playbackRate = 1;
}
}
});
</script>
</head>
<body>
<h1>Animationen mit WAAPI - 4<br>Bilderkarussell mit Steuerung</h1>
<main>
<div id="controls">
<button id="back" aria-label="run animation backwards">
◀◀
</button>
<button id="play" aria-label="play/pause animation">❙❙</button>
<button id="forward" aria-label="choose next picture in animation">
▶▶
</button>
<output></output>
</div>
<div id="container">
<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>Terassen im Valle Sagrado de los Incas</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/a/ab/Peru-3.jpg" alt="Peru 2007: Machu Picchu">
<figcaption>Machu Picchu</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/8/80/Peru-4.jpg" alt="Peru 2007: Machu Picchu - Lamas in den Ruinen">
<figcaption>Machu Picchu - Lamas in den Ruinen</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/3/3f/Peru-5.jpg" alt="Peru 2007: Uros-Inseln im Titicaca-See">
<figcaption>Uros-Inseln im Titicaca-See</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/4/41/Peru-6.jpg" alt="Peru 2007: Ceviche - Meeresfrüchte mit Zitronensaft">
<figcaption>Ceviche - Meeresfrüchte mit Kartoffeln und Zitronensaft</figcaption>
</figure>
</div> </div>
</main>
</body>
</html>
