Depot43-Unterlagen - Animation 1

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/wolken.jpg") repeat fixed;
	}
	  .container{
	  	max-width:500px;
		font-size:3em;
	  }
	  div.mongolfiere {
		  width:250px;
		  height:300px;
		  /*border:1px solid white;*/
		  position:fixed;
	  }
  </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>

	<div class="container">
		<div class="mongolfiere"  
		data-start="left:0vw;top:10px;"  
		data-end="left:100vw;top:10px;"  
		> 
		<img src="http://depot43.ch/unterlagen/assets/skrollr/mongolfiere.png" alt=""> 
		</div>
		<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>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptates nulla veritatis tenetur nemo ad, aut perspiciatis, ipsum dicta consequuntur! Beatae modi explicabo ad iste voluptatem ut numquam quo veniam.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus omnis recusandae, non praesentium fugit. Alias quam rem quis! Porro fugit, in maxime repudiandae rem obcaecati sunt neque ducimus odit autem voluptate hic, harum odio officiis sapiente eaque. Modi corporis quisquam veniam fugit repellat soluta eos eligendi ratione, tempora aut mollitia impedit. Magnam reiciendis, architecto quam impedit eligendi consequatur rerum dolores deserunt incidunt aliquid. Ipsa dolor ut tempore repellendus labore temporibus quaerat beatae quas voluptas soluta consequatur dicta, doloribus quod sunt adipisci dignissimos pariatur eligendi cum non. Nisi rerum dicta numquam non sed suscipit nesciunt asperiores, itaque aliquid id? Veritatis, fugiat.</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) {
			jQuery('#offset').text(data.curTop);
		}
	});
  
  </script>
</body>
</html>




            

Anleitung - Animationsaufbau 1

Ein Bild mit CSS in das Body-Element einbinden
Parameter für "scrollr.js" einfügen (Bsp.):

```
data-0="background-position:0px 0px;"
```

data-4000="background-position:0px -1000px;"

Beachte: Die Längenangabe: "data-4000" bestimmt die Höhe des Body-Elements (abzüglich der Länges des Scrollbakens)

Eienen längeren Textblock in den Body einfügen (nicht animiert)
Ein Div-Element für ein quer laufendes Bild einfügen
Darin das Bild platzieren
CSS-Stile für das Div-Element festlegen
Die Animation beim Scroll eintragen (Bsp.):

data-start="left:0vw;top:10px;" data-end="left:100vw;top:10px;"

Teste dein Scroll-Projekt im Browser