Скроллинг событие мыши

[imedia]

Скажите пожалуйста как организовать вот такой скролл с применением 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>

Оба имеют абсолютное позиционирование и надо чтобы первый уехал вверх с эффектом по прокрутке колесика, подскажите кодом пожалуйста, так как я пробую не получается

[devote]

// мини библа для удобства
(function(WheelControl) {
  WheelControl.prototype = {
    constructor: WheelControl,
    _freezed: true,
    _onwheel: function(fn) {
      var self = this;
      return this._onwheel.fn = function(e) {
        e = e || window.event;
        if (!e.preventDefault) {
          e.preventDefault = function() {
            e.returnValue = false;
          }
        }
        fn.call(self, (-e.detail / 3) || (e.wheelDelta / 120), e);
      }
    },
    bind: function(fn) {
      this._onwheel.fn = this._onwheel(fn);
      this.unfreeze();
      return this;
    },
    unbind: function() {
      this.freeze();
      this._onwheel.fn = null;
      return this;
    },
    freeze: function() {
      this._freezed = true;
      this.elem[this._params.removeName](this._params.wheelType, this._onwheel.fn, false);
      return this;
    },
    unfreeze: function() {
      if (this._onwheel.fn && this._freezed) {
        this.elem[this._params.addName](this._params.wheelType, this._onwheel.fn, false);
        this._freezed = false;
      }
      return this;
    }
  };
})(window.WheelControl = function WheelControl(elem) {
  if (!(this instanceof WheelControl)) {
    return new WheelControl(elem);
  }
  if (!(this.elem = elem)) {
    throw Error('The parameter must be an HTML element');
  }

  this._params = {
    addName: elem.addEventListener ? 'addEventListener' : 'attachEvent',
    removeName: elem.removeEventListener ? 'removeEventListener' : 'detachEvent',
    wheelType: elem.addEventListener ? ('onwheel' in document ? 'wheel' :
      'onmousewheel' in document ? 'mousewheel' : 'MozMousePixelScroll') : 'onmousewheel'
  };
});

// =====================================================
// работа с минибиблой
// =====================================================
WheelControl(document).bind(function(delta, event) {
  // заморозим получение события колеса мыши
  this.freeze();

  // ... что-то тут делаем, анимируем, и прочие действия
  if (delta > 0) {
    // колесо крутят вверх, на начало страницы
  } else if (delta < 0) {
    // колесо крутят вниз, в конец страницы
  }

  // отменяем действие по умолчанию
  event.preventDefault();

  // теперь можем снова получать событие
  this.unfreeze();
});

[imedia]

событие я поймал, смотрите код выше а вот с easing не получается

[devote]

и что же ты не можешь понять?

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="slide2">Привет мир!</div>
<div id="slide1">Hello world!</div>
<style>
html, body {
  padding: 0;
  margin: 0;
}
#slide1 {
  top: 0;
  position: fixed;
  width:100%;
  height:100%;
  background:rgb(61,115,153);
}
#slide2 {
  top: 100%;
  position: fixed;
  width:100%;
  height:100%;
  background:rgb(255,95,64);
}
</style> 
<script>
// мини библа для удобства
(function(WheelControl) {
  WheelControl.prototype = {
    constructor: WheelControl,
    _freezed: true,
    _onwheel: function(fn) {
      var self = this;
      return this._onwheel.fn = function(e) {
        e = e || window.event;
        if (!e.preventDefault) {
          e.preventDefault = function() {
            e.returnValue = false;
          }
        }
        fn.call(self, (-e.detail / 3) || (e.wheelDelta / 120), e);
      }
    },
    bind: function(fn) {
      this._onwheel.fn = this._onwheel(fn);
      this.unfreeze();
      return this;
    },
    unbind: function() {
      this.freeze();
      this._onwheel.fn = null;
      return this;
    },
    freeze: function() {
      this._freezed = true;
      this.elem[this._params.removeName](this._params.wheelType, this._onwheel.fn, false);
      return this;
    },
    unfreeze: function() {
      if (this._onwheel.fn && this._freezed) {
        this.elem[this._params.addName](this._params.wheelType, this._onwheel.fn, false);
        this._freezed = false;
      }
      return this;
    }
  };
})(window.WheelControl = function WheelControl(elem) {
  if (!(this instanceof WheelControl)) {
    return new WheelControl(elem);
  }
  if (!(this.elem = elem)) {
    throw Error('The parameter must be an HTML element');
  }
 
  this._params = {
    addName: elem.addEventListener ? 'addEventListener' : 'attachEvent',
    removeName: elem.removeEventListener ? 'removeEventListener' : 'detachEvent',
    wheelType: elem.addEventListener ? ('onwheel' in document ? 'wheel' :
      'onmousewheel' in document ? 'mousewheel' : 'MozMousePixelScroll') : 'onmousewheel'
  };
});
 
// =====================================================
// работа с минибиблой
// =====================================================
WheelControl(document).bind(function(delta, event) {
  var self = this;

  // заморозим получение события колеса мыши
  self.freeze();
 
  // ... что-то тут делаем, анимируем, и прочие действия
  if (delta > 0) {
    $('#slide2').animate({"top": "100%"}, 'easeOutBounce');
    $('#slide1').animate({"top": "0"}, 'easeOutBounce', function() {
      self.unfreeze();
    });
  } else if (delta < 0) {
    $('#slide1').animate({"top": "-100%"}, 'easeOutBounce');
    $('#slide2').animate({"top": "0"}, 'easeOutBounce', function() {
      self.unfreeze();
    });
  }
 
  // отменяем действие по умолчанию
  event.preventDefault();
});
</script>

[imedia]

Но ваш код не работает в просмотрщике, кроме того если прописать easeOutQuart то нет не какой разницы между стандартной анимацией ease
http://easings.net/ru

[devote]

в просмотрщике

что за просмотрщик?

[imedia]

если на вашем коде просмотреть нажать, событие я сделал а вот easing easeOutQuart не идет

[рони]

easing easeOutQuart не идет

добавьте jquery-ui и добавьте duration