JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div style="text-align:center; margin-top:200px; font-family:sans-serif;"> <h1 style="font-size:64px; margin-bottom:20px;">Wie die Vögel</h1> <p style="font-size:24px; margin-bottom:50px;">Ein Projekt im Rahmen vom Minor Storytelling with Sound Design von Moritz Hersche</p> <p style="font-size:18px; margin-bottom:50px;">Klicke im Buch auf eine Seite um weiter oder zurück zu Blättern. Viel Spass :)</p> <a id="start-button" class="startlink" href="#" onclick="event.preventDefault(); window.preloadAndStart();">Start</a> <<link "<span class='startpink'>Credits</span>">> <<goto "Credits">> <</link>> </div>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:80vh;"> <div style="position:relative; display:inline-block;"> <img src="bilder/WDV_Titelbild.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <a data-passage="WDV_1" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV1.stop()>> <<run WDVCred.fade(WDVCred.volume(), 0, 10000); setTimeout(function() { WDVCred.stop(); }, 10000)>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_1.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="Titelbild" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_2" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);" > </a> </div> </div> <<run WDV2.fade(WDV2.volume(), 0, 1000); setTimeout(function() { WDV2.stop(); }, 1000)>> <<run WDV2_lo.stop()>> <<run WDV1.volume(0)>> <<run WDV1.play()>> <<run iterativeHowlFade(window.WDV1, 1, 2000)>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <video src="videos/WDV-2.mp4" autoplay muted controls style="max-width:95vw; max-height:95vh; display:block;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_1" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_3" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV1.fade(WDV1.volume(), 0, 1000); setTimeout(function() { WDV1.stop(); }, 1000)>> <<run { window.WDV2.volume(0); let id = window.WDV2.play(); iterativeHowlFade(window.WDV2, 1, 2000); }>> <<run WDV3.fade(WDV3.volume(), 0, 2000); setTimeout(function() { WDV3.stop(); }, 2000)>> <<run WDV3_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_3.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_2" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_4" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);" > </a> </div> </div> <<run WDV2.fade(WDV2.volume(), 0, 1000); setTimeout(function() { WDV2.stop(); }, 1000)>> <<run WDV2_lo.fade(WDV2_lo.volume(), 0, 1000); setTimeout(function() { WDV2_lo.stop(); }, 1000)>> <<run { window.WDV3.volume(0); let id = window.WDV3.play(); iterativeHowlFade(window.WDV3, 1, 1000); }>> <<run WDV4.fade(WDV4.volume(), 0, 2000); setTimeout(function() { WDV4.stop(); }, 2000)>> <<run WDV4_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_4.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_3" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_5" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);" > </a> </div> </div> <<run WDV3.fade(WDV3.volume(), 0, 1000); setTimeout(function() { WDV3.stop(); }, 1000)>> <<run WDV3_lo.fade(WDV3_lo.volume(), 0, 1000); setTimeout(function() { WDV3_lo.stop(); }, 1000)>> <<run { window.WDV4.volume(0); let id = window.WDV4.play(); iterativeHowlFade(window.WDV4, 1, 1000); }>> <<run WDV5.fade(WDV5.volume(), 0, 2000); setTimeout(function() { WDV5.stop(); }, 2000)>> <<run WDV5_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_1.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="Titelbild" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_2" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Video --> <video src="videos/WDV-2.mp4" autoplay muted style="max-width:95vw; max-height:95vh; display:block; pointer-events:none;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_1" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_3" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <video src="videos/WDV-5.mp4" autoplay muted controls style="max-width:95vw; max-height:95vh; display:block;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_4" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_6" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV4.fade(WDV4.volume(), 0, 1000); setTimeout(function() { WDV4.stop(); }, 1000)>> <<run WDV4_lo.fade(WDV4_lo.volume(), 0, 1000); setTimeout(function() { WDV4_lo.stop(); }, 1000)>> <<run { window.WDV5.volume(0); let id = window.WDV5.play(); iterativeHowlFade(window.WDV5, 1, 1000); }>> <<run WDV6.fade(WDV6.volume(), 0, 2000); setTimeout(function() { WDV6.stop(); }, 2000)>> <<run WDV6_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_6.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_5" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_7" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV5.fade(WDV5.volume(), 0, 1000); setTimeout(function() { WDV5.stop(); }, 1000)>> <<run WDV5_lo.fade(WDV5_lo.volume(), 0, 1000); setTimeout(function() { WDV5_lo.stop(); }, 1000)>> <<run { window.WDV6.volume(0); let id = window.WDV6.play(); iterativeHowlFade(window.WDV6, 1, 1000); }>> <<run WDV7.fade(WDV7.volume(), 0, 2000); setTimeout(function() { WDV7.stop(); }, 2000)>> <<run WDV7_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Video --> <video src="videos/WDV-7.mp4" autoplay muted style="max-width:95vw; max-height:95vh; display:block; pointer-events:none;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_6" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_8" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV6.fade(WDV6.volume(), 0, 1000); setTimeout(function() { WDV6.stop(); }, 1000)>> <<run WDV6_lo.fade(WDV6_lo.volume(), 0, 1000); setTimeout(function() { WDV6_lo.stop(); }, 1000)>> <<run { window.WDV7.volume(0); let id = window.WDV7.play(); iterativeHowlFade(window.WDV7, 1, 1000); }>> <<run WDV8.fade(WDV8.volume(), 0, 2000); setTimeout(function() { WDV8.stop(); }, 2000)>> <<run WDV8_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_8.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_7" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_9" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV7.fade(WDV7.volume(), 0, 1000); setTimeout(function() { WDV7.stop(); }, 1000)>> <<run WDV7_lo.fade(WDV7_lo.volume(), 0, 1000); setTimeout(function() { WDV7_lo.stop(); }, 1000)>> <<run { window.WDV8.volume(0); let id = window.WDV8.play(); iterativeHowlFade(window.WDV8, 1, 1000); }>> <<run WDV9.fade(WDV9.volume(), 0, 2000); setTimeout(function() { WDV9.stop(); }, 2000)>> <<run WDV9_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Video --> <video src="videos/WDV-9.mp4" autoplay muted style="max-width:95vw; max-height:95vh; display:block; pointer-events:none;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_8" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_10" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV8.fade(WDV8.volume(), 0, 1000); setTimeout(function() { WDV8.stop(); }, 1000)>> <<run WDV8_lo.fade(WDV8_lo.volume(), 0, 1000); setTimeout(function() { WDV8_lo.stop(); }, 1000)>> <<run { window.WDV9.volume(0); let id = window.WDV9.play(); iterativeHowlFade(window.WDV9, 1, 1000); }>> <<run WDV10.fade(WDV10.volume(), 0, 2000); setTimeout(function() { WDV10.stop(); }, 2000)>> <<run WDV10_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_10.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_9" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_11" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV9.fade(WDV9.volume(), 0, 1000); setTimeout(function() { WDV9.stop(); }, 1000)>> <<run WDV9_lo.fade(WDV9_lo.volume(), 0, 1000); setTimeout(function() { WDV9_lo.stop(); }, 1000)>> <<run { window.WDV10.volume(0); let id = window.WDV10.play(); iterativeHowlFade(window.WDV10, 1, 1000); }>> <<run WDV11.fade(WDV11.volume(), 0, 2000); setTimeout(function() { WDV11.stop(); }, 2000)>> <<run WDV11_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Video --> <video src="videos/WDV-11.mp4" autoplay muted style="max-width:95vw; max-height:95vh; display:block; pointer-events:none;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_10" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_12" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV10.fade(WDV10.volume(), 0, 1000); setTimeout(function() { WDV10.stop(); }, 1000)>> <<run WDV10_lo.fade(WDV10_lo.volume(), 0, 1000); setTimeout(function() { WDV10_lo.stop(); }, 1000)>> <<run { window.WDV11.volume(0); let id = window.WDV11.play(); iterativeHowlFade(window.WDV11, 1, 1000); }>> <<run WDV12.fade(WDV12.volume(), 0, 2000); setTimeout(function() { WDV12.stop(); }, 2000)>> <<run WDV12_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_12.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_11" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_13" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV11.fade(WDV11.volume(), 0, 1000); setTimeout(function() { WDV11.stop(); }, 1000)>> <<run WDV11_lo.fade(WDV11_lo.volume(), 0, 1000); setTimeout(function() { WDV11_lo.stop(); }, 1000)>> <<run { window.WDV12.volume(0); let id = window.WDV12.play(); iterativeHowlFade(window.WDV12, 1, 1000); }>> <<run WDV13.fade(WDV13.volume(), 0, 2000); setTimeout(function() { WDV13.stop(); }, 2000)>> <<run WDV13_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Video --> <video src="videos/WDV-13.mp4" autoplay muted style="max-width:95vw; max-height:95vh; display:block; pointer-events:none;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_12" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_14" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV12.fade(WDV12.volume(), 0, 1000); setTimeout(function() { WDV12.stop(); }, 1000)>> <<run WDV12_lo.fade(WDV12_lo.volume(), 0, 1000); setTimeout(function() { WDV12_lo.stop(); }, 1000)>> <<run { window.WDV13.volume(0); let id = window.WDV13.play(); iterativeHowlFade(window.WDV13, 1, 1000); }>> <<run WDV14.fade(WDV14.volume(), 0, 2000); setTimeout(function() { WDV14.stop(); }, 2000)>> <<run WDV14_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Video --> <video src="videos/WDV-14.mp4" autoplay muted style="max-width:95vw; max-height:95vh; display:block; pointer-events:none;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_13" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_15" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV13.fade(WDV13.volume(), 0, 1000); setTimeout(function() { WDV13.stop(); }, 1000)>> <<run WDV13_lo.fade(WDV13_lo.volume(), 0, 1000); setTimeout(function() { WDV13_lo.stop(); }, 1000)>> <<run { window.WDV14.volume(0); let id = window.WDV14.play(); iterativeHowlFade(window.WDV14, 1, 1000); }>> <<run WDV15.fade(WDV15.volume(), 0, 2000); setTimeout(function() { WDV15.stop(); }, 2000)>> <<run WDV15_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_15.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_14" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_16" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV14.fade(WDV14.volume(), 0, 1000); setTimeout(function() { WDV14.stop(); }, 1000)>> <<run WDV14_lo.fade(WDV14_lo.volume(), 0, 1000); setTimeout(function() { WDV14_lo.stop(); }, 1000)>> <<run { window.WDV15.volume(0); let id = window.WDV15.play(); iterativeHowlFade(window.WDV15, 1, 1000); }>> <<run WDV16.fade(WDV16.volume(), 0, 2000); setTimeout(function() { WDV16.stop(); }, 2000)>> <<run WDV16_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Video --> <video src="videos/WDV-16.mp4" autoplay muted style="max-width:95vw; max-height:95vh; display:block; pointer-events:none;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_15" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_17" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV15.fade(WDV15.volume(), 0, 1000); setTimeout(function() { WDV15.stop(); }, 1000)>> <<run WDV15_lo.fade(WDV15_lo.volume(), 0, 1000); setTimeout(function() { WDV15_lo.stop(); }, 1000)>> <<run { window.WDV16.volume(0); let id = window.WDV16.play(); iterativeHowlFade(window.WDV16, 1, 1000); }>> <<run WDV17.fade(WDV17.volume(), 0, 2000); setTimeout(function() { WDV17.stop(); }, 2000)>> <<run WDV17_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_17.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_16" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_18" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV16.fade(WDV16.volume(), 0, 1000); setTimeout(function() { WDV16.stop(); }, 1000)>> <<run WDV16_lo.fade(WDV16_lo.volume(), 0, 1000); setTimeout(function() { WDV16_lo.stop(); }, 1000)>> <<run { window.WDV17.volume(0); let id = window.WDV17.play(); iterativeHowlFade(window.WDV17, 1, 1000); }>> <<run WDV18.fade(WDV18.volume(), 0, 2000); setTimeout(function() { WDV18.stop(); }, 2000)>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_18.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_17" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_19_20" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV17.fade(WDV17.volume(), 0, 1000); setTimeout(function() { WDV17.stop(); }, 1000)>> <<run WDV17_lo.fade(WDV17_lo.volume(), 0, 1000); setTimeout(function() { WDV17_lo.stop(); }, 1000)>> <<run { window.WDV18.volume(0); let id = window.WDV18.play(); iterativeHowlFade(window.WDV18, 1, 1000); }>> <<run WDV19_20.fade(WDV19_20.volume(), 0, 2000); setTimeout(function() { WDV19_20.stop(); }, 2000)>> <<run WDV19_20_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_19_20.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_18" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_22" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV18.fade(WDV18.volume(), 0, 1000); setTimeout(function() { WDV18.stop(); }, 1000)>> <<run { window.WDV19_20.volume(0); let id = window.WDV19_20.play(); iterativeHowlFade(window.WDV19_20, 1, 1000); }>> <<run WDV22.fade(WDV22.volume(), 0, 2000); setTimeout(function() { WDV22.stop(); }, 2000)>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_21.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_19_20" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_22" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_22.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_21" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_23" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV19_20.fade(WDV19_20.volume(), 0, 1000); setTimeout(function() { WDV19_20.stop(); }, 1000)>> <<run WDV19_20_lo.fade(WDV19_20_lo.volume(), 0, 1000); setTimeout(function() { WDV19_20_lo.stop(); }, 1000)>> <<run { window.WDV22.volume(0); let id = window.WDV22.play(); iterativeHowlFade(window.WDV22, 1, 1000); }>> <<run WDV23.fade(WDV23.volume(), 0, 2000); setTimeout(function() { WDV23.stop(); }, 2000)>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_23.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_22" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_24" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV22.fade(WDV22.volume(), 0, 1000); setTimeout(function() { WDV22.stop(); }, 1000)>> <<run { window.WDV23.volume(0); let id = window.WDV23.play(); iterativeHowlFade(window.WDV23, 1, 1000); }>> <<run WDV24.fade(WDV24.volume(), 0, 2000); setTimeout(function() { WDV24.stop(); }, 2000)>> <<run WDV24_lo.stop()>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Video --> <video src="videos/WDV-24.mp4" autoplay muted style="max-width:95vw; max-height:95vh; display:block; pointer-events:none;" onended="this.pause(); this.currentTime = this.duration;"> </video> <!-- Zurück --> <a data-passage="WDV_23" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> <!-- Weiter --> <a data-passage="WDV_25" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV23.fade(WDV23.volume(), 0, 1000); setTimeout(function() { WDV23.stop(); }, 1000)>> <<run { window.WDV24.volume(0); let id = window.WDV24.play(); iterativeHowlFade(window.WDV24, 1, 1000); }>> <<run WDV25.fade(WDV25.volume(), 0, 2000); setTimeout(function() { WDV25.stop(); }, 2000)>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } /* Rechte Seite – Verlauf von rechts nach innen */ .rightZone:hover { background: linear-gradient( to left, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <!-- Bild --> <img src="bilder/WDV_25.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Zurück --> <a data-passage="WDV_24" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> <!-- Weiter --> <a data-passage="WDV_Schluss" class="clickZone rightZone" style="right:0;" onclick="AudioEngine.randomSounds.play(0.8);"> </a> </div> </div> <<run WDV24.fade(WDV24.volume(), 0, 1000); setTimeout(function() { WDV24.stop(); }, 1000)>> <<run WDV24_lo.fade(WDV24_lo.volume(), 0, 1000); setTimeout(function() { WDV24_lo.stop(); }, 1000)>> <<run { window.WDV25.volume(0); let id = window.WDV25.play(); iterativeHowlFade(window.WDV25, 1, 1000); }>>
<style> .clickZone { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 5; cursor: pointer; transition: background 0.3s ease; } /* Linke Seite – Verlauf von links nach innen */ .leftZone:hover { background: linear-gradient( to right, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100% ); } </style> <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> <div style="position:relative; display:inline-block;"> <img src="bilder/WDV_Schluss.jpg" style="max-width:95vw; max-height:95vh; display:block;"> <!-- Nur Zurück --> <a data-passage="WDV_25" class="clickZone leftZone" style="left:0;" onclick="AudioEngine.randomSounds.play(0.2);"> </a> </div> </div> <<run WDV25.fade(WDV25.volume(), 0, 6000); setTimeout(function() { WDV25.stop(); }, 6000)>> <<link "<span class='startpink'>Credits</span>">> <<goto "Credits">> <</link>>
<div style="text-align:center; margin-top:200px; font-family:sans-serif;"> <h1 style="font-size:64px; margin-bottom:20px;">Vielen Dank an:</h1> <p style="font-size:24px; margin-bottom:50px;" >Germano Zullo, Albertine für das wunderschöne Bilderbuch Kindergarten Riedwies 2 für das aufnehmen der Kindersounds :) Sina für die Geräusche von Peter Patrycja Pakiela für die Unterstützung beim Programieren </p> <<link "<span class='startlink'>zurück</span>">> <<goto "landingpage">> <</link>> </div> <<run window.WDVCred.volume(0.4) window.WDVCred.play()>>