Скажите пожалуйста как организовать вот такой скролл с применением easing
http://easings.net/ru
к примеру есть два блока, да
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="slide2"></div>
<div id="slide1"></div>
<style>
#slide1{
position:absolute;
width:100%;
height:100%;
background:rgb(61,115,153);
}
#slide2{
position:absolute;
width:100%;
height:100%;
background:rgb(255,95,64);
}
</style>
<script>
function addHandler(object, event, handler) {
if (object.addEventListener) {
object.addEventListener(event, handler, false);
}
else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
}
else alert("Обработчик не поддерживается");
}
addHandler(window, 'DOMMouseScroll', wheel);
addHandler(window, 'mousewheel', wheel);
addHandler(document, 'mousewheel', wheel);
function wheel(event) {
var delta; // Направление колёсика мыши
event = event || window.event;
if (event.wheelDelta) { // В Opera и IE
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta; // Дополнительно для Opera
}
else if (event.detail) { // Для Gecko
delta = -event.detail / 3;
}
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
if (delta<0){
$('#slide1').animate({"top": "-100%"}, 'easeInBounce');
}
}
</script>
Оба имеют абсолютное позиционирование и надо чтобы первый уехал вверх с эффектом по прокрутке колесика, подскажите кодом пожалуйста, так как я пробую не получается