Depot43-Unterlagen - Audio und Parallax-scrolling

Code Elemente - HTML - CSS - JS

            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 CSS3 JS</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- CSS *************************** -->
  <style>
    /* Debugging Anzeige Balken */
    #offset {
        position: fixed;
        top: 0;
        text-align: center;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        color: #fff;
        padding: 10px 0;
        z-index: 999;
    }
    #progressBar {
        background-color: #f00;
        height: 10px;
        width: 10px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2000;
    }
	body {
		background:url("http://depot43.ch/unterlagen/assets/skrollr/audio/BackgroundContent.jpg") repeat fixed;
	}
	  .container{
	  	width:33%;
		font-size:3em;
	  }
  </style>
  </head>

<!-- HTML *************************** -->
<body data-0="background-position:0px 0px;"  data-4000="background-position:0px -1000px;">

<div id="progressBar" 
    data-0="width:0%;" 
    data-end="width:100%;"></div>
                       
    <div id="offset">10</div>
    
    <!-- Audio Hier! -->

	<div class="container">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo dolores nobis voluptas, ullam quos debitis nostrum ex obcaecati magnam quasi eos repellat facilis minima eum deserunt sed eaque nulla autem, aperiam. Voluptatum quos, reiciendis quaerat necessitatibus ratione inventore optio similique. Provident a esse vel cupiditate, adipisci ipsum ab repellendus numquam.</p>
	</div>


  <!-- Javascript ************************ -->
  <script type="text/javascript" src="https://depot43.ch/unterlagen/themes/bootstrap/js/skrollr.min.js"></script>
  <!-- jQuery optional -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
  <script type="text/javascript">
  
      var s = skrollr.init({
        // forceHeight: false,
        render: function(data) {
            //console.log(data.curTop);
            
            $('#offset').text(data.curTop);
            
           // Bedingungen hier! ...
        }
    });
  
  </script>
</body>
</html>




            

Hinweis

HTML: Das Audio-Element inizialisiert die Audio-Dateien:

<audio id="audiostart" preload="auto" loop/>
    <source src="audio/urnersee.mp3" type="audio/mpeg">
</audio>

<audio id="audio01" preload="auto"/>
    <source src="audio/gong1.mp3" type="audio/mpeg">
</audio>

<audio id="audio02" preload="auto"/>
    <source src="audio/gong2.mp3" type="audio/mpeg">
</audio>

Mit jQuery wird die Audiodatei gestartet. Dazu wird die Position des Scrollbalkens wird ermittelt:

<script type="text/javascript">
    var s = skrollr.init({
        // forceHeight: false,
        render: function(data) {
        
            //console.log(data.curTop);
            
            $('#offset').text(data.curTop);
            
        }
    });
</script>

Innerhalb der Funktion kann jetzt die Audiodatei gestartet werden:

<script type="text/javascript">
    var s = skrollr.init({
        // forceHeight: false,
        render: function(data) {
            //console.log(data.curTop);
            
            $('#offset').text(data.curTop);

            if (data.curTop > '0' && data.curTop < '50'){
                var audiostart0 = document.getElementById("audiostart"); 
                audiostart.pause(); 
            }
            if (data.curTop > '50' && data.curTop < '150'){
                var audiostart0 = document.getElementById("audiostart"); 
                audiostart.play(); 
            }

            if (data.curTop > '330' && data.curTop < '350'){
                var audiostart1 = document.getElementById("audio01"); 
                audio01.play(); 
            }
            if (data.curTop > '650' && data.curTop < '800'){
                var audiostart2 = document.getElementById("audio02"); 
                audio02.play(); 
            }
            if (data.curTop > '0' && data.curTop < '500'){
                var audiostart3 = document.getElementById("audio03"); 
                audio03.pause(); 
            }
            if (data.curTop > '900' && data.curTop < '1000'){
                var audiostart3 = document.getElementById("audio03"); 
                audio03.play(); 
            }
        }
    });
</script>

Eine einmal gestartet Audiodatei wird abgespielt, bis zum Schluss oder bis sie gestoppt wird. Ein weiter-scrollen stoppt das abspielen nicht.