Blog/smoothscroller/demo/index.html
(Deskargatu)
<html>
<title>Smoothscroller Demo Page</title
<head>
<script src="../smoothscroller.js"></script>
<style type="text/css">
.item
{
position:relative;
width:80%;
margin:30px auto;
background:blue;
overflow:hidden;
}
img
{
position:relative;
width:20%;
}
</style>
</head>
<body>
<div class="item item1"><img src="img/pingu.jpg" /></div>
<div class="item item2"><img src="img/pingu_sad.jpg" /></div>
<div class="item item3"><img src="img/pingu.jpg" /></div>
<div class="item item4"><img src="img/pingu_sad.jpg" /></div>
<div class="item item5"><img src="img/pingu.jpg" /></div>
<div class="item item6"><img src="img/pingu_sad.jpg" /></div>
<div class="item item7"><img src="img/pingu.jpg" /></div>
<div class="item item8"><img src="img/pingu_sad.jpg" /></div>
<script type="text/javascript">
smoothscroller.initialize();
// Creating a callback for every item
function item_animation(item, scroll_position , percent_complete)
{
item.style.left = (percent_complete*100)+'%';
}
var items = [].slice.call(document.querySelectorAll(".item"));
items.forEach(function(item)
{
var move_item = item.querySelector('img');
var start_position = Math.max(0,item.offsetTop - window.innerHeight/2);
var end_position = item.offsetTop + window.innerHeight;
smoothscroller.add(start_position, end_position, item_animation.bind(this,move_item));
});
</script>
</body>
</html>
Tfe