Depot43-Unterlagen - Animation 3

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>
	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:400px;
		/*border:1px solid white;*/
		position:fixed;
	}
	div.mongolfiere img {
	  	position:absolute
	}
	p.absatz2 {
	  	position:relative;
	}
	p.absatz3 {
	  	position:relative;
	}
  </style>
  </head>

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

	<div class="container">
		<div class="mongolfiere" 
		     data-start="left:0vw;top:50px;margin-left:-250px;" 
		     data-end="left:100vw;top:50px;margin-left:50px;"
		     > 
		<img src="http://depot43.ch/unterlagen/assets/skrollr/mongolfiere.png" alt="Mongolfier"
		     data-500-start="transform: rotate(9deg);top:40px;" 
		     data-900-start="transform: rotate(-14deg);top:-30px;"
		     data-1600-start="transform: rotate(5deg);top:50px;"
		     data-2600-start="transform: rotate(-8deg);top:-10px;"
		     data-3200-start="transform: rotate(0deg);top:10px;"
		     ></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. Voluptatum quos, reiciendis quaerat necessitatibus quasi eos repellat facilis minima eum deserunt.</p>
		<p class="absatz2" data-800-start="top:400px;" data-2000-start="top:1400px;">Zweiter Absatz: 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 class="absatz3" data-2000-start="top:2000px;" data-4000-start="top:1000px;">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="http://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">
  
    	window.setInterval('scrollBy(0,5)',30);
  	var s = skrollr.init({
		forceHeight: true,
		
		render: function(data) {
			jQuery('#offset').text(data.curTop);
		}
	});
  
  </script>
</body>
</html>




            

Anleitung - Animationsaufbau 3

Üblicherweise wird die Animation nur abgespielt, wenn der Scrollbalken bewegt wird. Wird der Scrollbalken mit Javascript automatisch nach unten bewegt, läuft die Animation auch ohne Eingriff ab.

Füge den Javascriptbefehl in deine Animation ein (Bsp.):

window.setInterval('scrollBy(0,5)',30);

Der Scrollbalken wird so zur "Timeline". Die Animation läuft über die gesamte Höhe des Scrollbereichs.