Показать сообщение отдельно
  #1 (permalink)  
Старый 20.05.2014, 17:30
Профессор
Отправить личное сообщение для imedia Посмотреть профиль Найти все сообщения от imedia
 
Регистрация: 20.05.2014
Сообщений: 292

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



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

Последний раз редактировалось imedia, 20.05.2014 в 18:53.
Ответить с цитированием