Depot43-Unterlagen - Animation 2

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: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 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: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="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: true,
		render: function(data) {
			jQuery('#offset').text(data.curTop);
		}
	});
  
  </script>
</body>
</html>




            

Anleitung - Animationsaufbau 2

Innerhalb des quer laufenden Div-Elements, kann auch das Bild animiert werden (Bsp.):

        <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;">

Animiere das quer laufende Bild
Teste es im Browser