Depot43-Unterlagen - Animationsprinzip

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>
	#animiert {min-height: 800px;}
  </style>
  </head>

<!-- HTML *************************** -->
<body>

	<div id="animiert" data-start="background-color:rgb(239, 46, 62);" data-end="background-color:rgb(111, 168, 220);"> 
	</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();
  
  </script>
</body>
</html>




            

Hinweis

Folgende Bedingungen müssen für einen Skrollr-Animation beachtet werden:

Der Inhalt des Dokuments muss höher sein, als das jeweilige Browserfenster, andernfalls wird weder ein Scrollbalken angezeigt noch exisietert ein Bereich zum scrollen.
Es kann jedes HTML-Element animiert werden. Es kann eine Klasse enthalten. Sinnvoll ist es, eine ID zu verwenden, da sie einmalig sein muss und für die CSS-Stile eine hohe Wertung besitzt (in diesem Beispiel): <div id="animiert">
Es werden zwei beliebige Positionen des Scrollbalkens ausgewertet. Innerhalb dieser Positionen wird eine CSS-Eigenschaft dynamisch verändert (in diesem Beispiel):
- Startpunkt > data-start="", das enspricht der obersten Position des Scrollbalkens
- Endpunkt > data-end="", das entspricht der untersten Position des Scrollbalkens
Animiert wird eine mögliche CSS-Eigenschaft (in diesem Beispiel die Hintergrungfarbe):

von > data-start="background-color:rgb(239, 46, 62);"
nach > data-end="background-color:rgb(111, 168, 220);"