Steuerung Lautstärke mit Scrollen

Question

mir für ein Schulprojekt, eine Website, aber ich habe noch nie mit Codierung gearbeitet - so tut mir leid, wenn ich keine Ahnung, wie meine Frage Begriff .. richtig

I Ich möchte die Lautstärke meines Audioclips verringern, wenn ich auf meiner Website nach unten scrolle. Es fällt mir schwer, die Logik von JavaScript zu verstehen ... Ich möchte so gut wie möglich bei HTML und CSS bleiben, aber dafür muss ich jQuery verwenden, oder?

Ich hoffe, einige von euch könnten mir in die richtige Richtung zeigen .. Vielen Dank im Voraus!

Answer 1

Werfen Sie einen Blick auf dieses Beispiel, Hoffnung Sie anfangen kann helfen (auf dem Video scrollen):

$(function() { 
 

 
    var video = $('#myVideo'); 
 
    var videoEl = video[0]; 
 
    var delta = 0.1; //you can choose whatever delta (+ delta + volume change speed) 
 
    video.on('wheel', function(event) { 
 
    event.preventDefault(); //prevent default page scroll; 
 
    //check for scroll down 
 
    if (event.originalEvent.deltaY > 0 && videoEl.volume - delta >= 0) { 
 
     videoEl.volume -= delta; 
 
    //check for scroll up 
 
    } else if(event.originalEvent.deltaY < 0 && videoEl.volume + delta <= 1) { 
 
     videoEl.volume += delta; 
 
    } 
 
    }); 
 

 
})

html { 
 
    padding: 20px 0; 
 
    background-color: #efefef; 
 
} 
 

 
body { 
 
    width: 400px; 
 
    padding: 40px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); 
 
} 
 

 
video { 
 
    width: 400px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video id="myVideo" autobuffer controls autoplay> 
 
    <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4"> 
 
</video>