Ton abspielen, wenn opacity= 1
Hallo,
ich habe eine Liste auf meiner Homepage und hinter jedem Listeneintrag erscheint nach und nach ein Häkchen. Nun möchte ich jedes Mal, wenn ein Häkchen angezeigt wird, einen kurzen Ton abspielen. Aber leider habe ich keine Ahnung wie ich das machen könnte.. Kann CSS3 das machen? Oder verwende ich JS? Es sollte aber keine „onClick“- oder „onHover“-Funktion sein, da der Sound ja immer dann abgespielt werden soll wenn der Haken dargestellt wurde, d.h. opacity = 1
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<style>
#Body {
background: #f6f8f9;
background: linear-gradient(45deg, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
}
.hook {
padding-left: 0px;
}
.showhook1 {
animation-fill-mode: forwards;
animation: showhooks 1s linear;
}
.showhook2 {
animation-fill-mode: forwards;
animation: showhooks 1.33s linear ;
}
.showhook3 {
animation-fill-mode: forwards;
animation: showhooks 1.66s linear ;
}
.showhook4 {
animation-fill-mode: forwards;
animation: showhooks 2s linear ;
}
.showhook5 {
animation-fill-mode: forwards;
animation: showhooks 2.33s linear ;
}
.showhook6 {
animation-fill-mode: forwards;
animation: showhooks 2.66s linear ;
}
.showhook7 {
animation-fill-mode: forwards;
animation: showhooks 3s linear ;
}
.showhook8 {
animation-fill-mode: forwards;
animation: showhooks 3.33s linear ;
}
.showhook9 {
animation-fill-mode: forwards;
animation: showhooks 3.66s linear ;
}
.showhook10 {
animation-fill-mode: forwards;
animation: showhooks 4s linear ;
}
.showhook11 {
animation-fill-mode: forwards;
animation: showhooks 4.33s linear ;
}
@keyframes showhooks {
0% {
opacity: 0;
}
90% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
#ContentChecklist {
font: 1.2em Lane, BAHNSCHRIFT, Arial, lucida sans unicode;
line-height: 2.2;
width: 70%;
float: left;
position: sticky;
top: 0;
z-index: 15000000;
padding: 30px 0px 30px 20px;
background: rgba(180, 180, 180, 0.85);
}
h5.checklist {
margin: 0;
padding: 0;
font: 1em BAHNSCHRIFT, Arial text-align: center;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
}
h5 {
display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.checklistText {
display: inline-block;
width: 80%;
padding-right: 0px;
margin-right: 30px;
}
.tracking-in-contract-bck {
animation: tracking-in-contract-bck 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
</style>
</head>
<body id="Body" class="Body">
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- ganzjährig bewohnbar?</span><span><img class="hook showhook1" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- Heizung?</span><span><img class="hook showhook2" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- fließend Wasser / WC?</span><span><img class="hook showhook3" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- Dusche? (in 3 Häusern)</span><span><img class="hook showhook4" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- Kinder willkommen?</span><span><img class="hook showhook5" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- Betten bezogen?</span><span><img class="hook showhook6" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- Hunde erlaubt?</span><span><img class="hook showhook7" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- Verpflegung gesichert?</span><span><img class="hook showhook8" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- Wochenendaufschlag?</span><span><img class="hook showhook9" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- TV in den Häusern?</span><span><img class="hook showhook10" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<h5 class="checklist"><span class="checklistText tracking-in-contract-bck">- Meerblick?</span><span><img class="hook showhook10" width="20" height="20" src="/image/Haken10.png" alt="" /></span></h5>
<script>
var timer;
function play(x){
timer=setTimeout(function(){
if(x<=9){
var audio = new Audio('/media/Shoot_01.mp3');
audio.play();
x++;
play(x);
}else{
clearTimeout(timer);
}
},333);
}
document.addEventListener("DOMContentLoaded", function(event) {
play(0)
})
</script>
</body>
</html>