Skip to content

Instantly share code, notes, and snippets.

@Fab1n
Created April 27, 2011 12:48
Show Gist options
  • Save Fab1n/944189 to your computer and use it in GitHub Desktop.
Save Fab1n/944189 to your computer and use it in GitHub Desktop.
html5session11
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment