Скроллинг событие мыши
Скажите пожалуйста как организовать вот такой скролл с применением 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> Оба имеют абсолютное позиционирование и надо чтобы первый уехал вверх с эффектом по прокрутке колесика, подскажите кодом пожалуйста, так как я пробую не получается |
// мини библа для удобства (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(); }); |
событие я поймал, смотрите код выше а вот с easing не получается
|
и что же ты не можешь понять?
<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> |
Но ваш код не работает в просмотрщике, кроме того если прописать easeOutQuart то нет не какой разницы между стандартной анимацией ease
http://easings.net/ru |
Цитата:
|
если на вашем коде просмотреть нажать, событие я сделал а вот easing easeOutQuart не идет
|
Цитата:
|
Часовой пояс GMT +3, время: 09:48. |