Fab1n/html.html

## html.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Tutorial</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <style type="text/css">
  #slider {
  	width: 300px;
  	height: 100px;
  	background: white;
  	overflow: hidden;
  	position: relative;
  }

  #slider .wrapper {
  	width: 900px;
  	height: 100px;
  	position: absolute;
  	top: 0;
  	left: 0;
  	-moz-transition: all ease 2s;
  	-webkit-transition: all ease 2s;
  }

  #slider .wrapper div {
  	width: 300px;
  	float: left;
  	height: 100px;
  	background: blue;
  	color: white;
  }

  #slider .wrapper #first {
  	background: #111;
  }
  #slider .wrapper #second {
  	background: #444;
  }
  #slider .wrapper #third {
  	background: #999;
  }

  #control div {
  	width: 20px;
  	height: 20px;
  	cursor: pointer;
  	border: 1px solid black;
  }
  </style>
  <script type="text/javascript">

  var old = 0;
  var now = 0;


  $(document).ready(function(){
  	$('#eins').click(function(){
  		$('#slider .wrapper').css('left',0 + 'px');
  	});
  	$('#zwei').click(function(){
  		$('#slider .wrapper').css('left',-300 + 'px');
  	});
  	$('#drei').click(function(){
  		$('#slider .wrapper').css('left',-600 + 'px');
  	});
  	if($('video').attr('canPlayType')){
	   $('video').bind('timeupdate',function(event){
	      now = parseInt(this.currentTime);

	      /* throttle function calls to full seconds */
	      if(now > old){
	        showsection(now);
	      }
	      old = now;

	    });

	    function showsection(t){
	      for(i=0;i<20;i++){
	        if(t >= 3 && t <= 6){
	          $('#slider .wrapper').css('left',-300 + 'px');
	        } else if (t >= 10 && t <= 15){
	        	$('#slider .wrapper').css('left',-600 + 'px');
	        }
	      }
	    };
	};

  });


  </script>
</head>
<body>
  <header>
  	<h1>HTML5 Tutorial</h1>
  </header>
  <section id="main">
  	<div id="video">
<video src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv" style="width: 400px; height: 300px;" controls></video>
  </section>
  <section id="slider">

	  <div class="wrapper">

	  	<div id="first">a</div>
	  	<div id="second">b</div>
	  	<div id="third">c</div>

	  </div>

  </section>
  <section id="control">

  	<div id="eins">1</div>
  	<div id="zwei">2</div>
  	<div id="drei">3</div>

  </section>
  <footer></footer>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HTML5 Tutorial</title>
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<style type="text/css">
	#slider {
	width: 300px;
	height: 100px;
	background: white;
	overflow: hidden;
	position: relative;
	}

	#slider .wrapper {
	width: 900px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	-moz-transition: all ease 2s;
	-webkit-transition: all ease 2s;
	}

	#slider .wrapper div {
	width: 300px;
	float: left;
	height: 100px;
	background: blue;
	color: white;
	}

	#slider .wrapper #first {
	background: #111;
	}
	#slider .wrapper #second {
	background: #444;
	}
	#slider .wrapper #third {
	background: #999;
	}

	#control div {
	width: 20px;
	height: 20px;
	cursor: pointer;
	border: 1px solid black;
	}
	</style>
	<script type="text/javascript">

	var old = 0;
	var now = 0;


	$(document).ready(function(){
	$('#eins').click(function(){
	$('#slider .wrapper').css('left',0 + 'px');
	});
	$('#zwei').click(function(){
	$('#slider .wrapper').css('left',-300 + 'px');
	});
	$('#drei').click(function(){
	$('#slider .wrapper').css('left',-600 + 'px');
	});
	if($('video').attr('canPlayType')){
	$('video').bind('timeupdate',function(event){
	now = parseInt(this.currentTime);

	/* throttle function calls to full seconds */
	if(now > old){
	showsection(now);
	}
	old = now;

	});

	function showsection(t){
	for(i=0;i<20;i++){
	if(t >= 3 && t <= 6){
	$('#slider .wrapper').css('left',-300 + 'px');
	} else if (t >= 10 && t <= 15){
	$('#slider .wrapper').css('left',-600 + 'px');
	}
	}
	};
	};

	});


	</script>
	</head>
	<body>
	<header>
	<h1>HTML5 Tutorial</h1>
	</header>
	<section id="main">
	<div id="video">
	<video src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv" style="width: 400px; height: 300px;" controls></video>
	</section>
	<section id="slider">

	<div class="wrapper">

	<div id="first">a</div>
	<div id="second">b</div>
	<div id="third">c</div>

	</div>

	</section>
	<section id="control">

	<div id="eins">1</div>
	<div id="zwei">2</div>
	<div id="drei">3</div>

	</section>
	<footer></footer>

	</body>
	</html>