<!-- This div element holds the audio files you will use in your story. -->
<!-- You can style this element to hide the content off to the side or maybe include in your footer with the players; all up to you. -->

<div>
    <!-- HTKL5 AUDIO ELEMENT -- https://www.w3schools.com/html/html5_audio.asp -->
    <audio loop id="scrollaudio" src="audio/complex.mp3" type="audio/mpeg"></audio>
    <audio loop id="scrollaudio2" src="audio/amok.mp3" type="audio/mpeg"></audio>
    <audio id="scrollaudio3" src="audio/correct.wav" type="audio/wav"></audio>
    <audio>Your browser does not support the audio element.</audio>
</div>


<!-- HOW TO PAGE -- http://www.jqueryscript.net/other/jQuery-Plugin-To-Play-Audios-On-Scroll-AudioFade.html -->
<!-- DEMO PAGE -- http://www.jqueryscript.net/demo/jQuery-Plugin-To-Play-Audios-On-Scroll-AudioFade/ -->

<!-- YOU MUST PLACE THE FOLLOWING TWO LINKED SCRIPTS -->
<!-- THE FIRST SCRIPT IS ON A HOSTED SEVER, OUT THERE ON THE INTER-WEB -->

<!-- https://developers.google.com/speed/libraries/ -->
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<!-- THE SECOND SCRIPT IS LOCAL, IN YOUR ROOT FOLDER -->
<script type="text/javascript" src="css-js/audioFade.js"></script>

<!-- This script is where you will create a variable for each sound source file -->
<!-- The variable name is user defined, meaning you maki "it" up. Do not use spaces or hyphens. Do not begin with numbers e.g., 8, 9, 10 -->
<!-- The "element" name is also user defined, follow the same rules as variable names and you should be fine. -->
<!-- The comment within the script contains a list of data-points and their order. Use the data-points you need. -->

<script>
$(function() {
//function AudioFade(element, fadeIn, fadeOut, fadeDuration)
var first = new AudioFade('#scrollaudio', 300, 1190, 300).init();
var second = new AudioFade('#scrollaudio2', 1200, 2390).init();
var third = new AudioFade('#scrollaudio3', 3500).init();
});
</script>





SMOOTH SCROLL FIX


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

<!-- https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll -->
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollLeft: $(hash).offset().left
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>