HTML5 Scroll and Slide Demo

by Prasad

HTML

<div class="wrapper">
<ul>
	<li><img src="images/47531.jpg"></li>
   	<li><img src="images/53421.jpg"></li>
   	<li><img src="images/66411.jpg"></li>
	<li><img src="images/68761.jpg"></li>    
   	<li><img src="images/68781.jpg"></li>
</ul>
</div>

CSS

.wrapper {
		height:90px;
		overflow-y:auto;
		overflow-x:hidden;
		width:500px;		
	}
	ul {
		margin: 0;
	}	
	li {
		list-style:none;		
	}

JavaScript

$(document).ready(function(){
	$('.wrapper').scroll(function(){				
		var Val=$(".wrapper").scrollTop();
		Val = (Val /100) * 9;
		$('.wrapper ul').css('transform', 'rotate('+Val+'deg)');
		console.log('transform', 'rotate('+Val+'deg)');
	});
})