Mouse wheel control side div Flip effect

CSS section:

<style>        * {margin:0;padding:0;}. Wrap{width:1000px;margin:0 Auto;Overflow:Hidden;Zoom:1;}. Left{float: Left;width:800px;Height:500px;Overflow:Hidden;}. Right{float: Right;width:200px;Height:500px;Background-color:#ddd;}P{Font:30px/500px "Microsoft Yahei";text-align:Center;}. HD{Height:100px;Background-color:#0ff;}. BD{Overflow:Hidden;Zoom:1;}. FT{Height:100px;Background-color:#0ff;}    </style>

HTML section:

<Divclass= "Wrap">    <Divclass= "Left">        <Divclass= "Panel"style= "Background-color: #f00; color: #fff;">            <P>Only this side can scroll.</P>        </Div>        <Divclass= "Panel"style= "Background-color: #0f0; color: #fff;">            <P>Local scrolling does not seem to be very useful, if there is content there will be offset</P>        </Div>        <Divclass= "Panel"style= "Background-color: #00f; color: #fff;">            <P>Even with offset is not a good solution</P>        </Div>    </Div>    <Divclass= "Right">        <P>No scrolling here.</P>    </Div></Div>

JS section:(need to introduce jquery.js,easing.js and scrollify.js here )

<Script>    $(function() {        $('. Panel'). css ({'Height': $('. Left'). Height ()}); $.scrollify ({section:'. Panel', Target:'. Left'        }); });</Script>

Mouse wheel controls side div Flip-up effect