Tengo un par de dudas y un problema.
Podéis ver lo que quiero hacer en este link:
http://fetching-bails.000webhostapp.com/rotulo/
En resumen: al hacer scroll en un determinado momento se bloquea el scroll y se anima el texto hacia izquierda o hacia derecha según el sentido de la rueda del ratón. Cuando el texto llegue a su tope (dcha, izda) se libera el scroll y continúa la navegación.
Las dudas:
1) Si hago el scroll con la rueda del ratón muy despacio, detecta que ha llegado a la zona de navegación y hace la animación. Pero si uso la rueda normalmente no funciona la animación. ¿Debo controlar la velocidad del scrool con jquery o javascript para que eso no ocurra?
2) En el código que pongo más adelante ¿debo poner la parte que controla el 'wheel' dentro de la parte que controla el scroll?
El problema:
No funciona si sobrepaso con el scroll el div que contiene la animación y vuelvo a él.
El código html:
Código HTML:
<body> <div class="cortina"> </div> <section class="parotulo"> <div class="rotulo"> <h2>What is called beauty always develops from real life.</h2> <p>Junichiro Tanizaki. In Praise of Shadows</p> </div> </section> <section class="empuja"></section> </body>
Código:
Si alguien puede ayudarme: gracias por adelantado. $(document).ready(function(){
var dispara1 = 0;//para el rótulo
var top_parotulo = $('.parotulo').offset().top;
$(window).on('wheel', function(event){
if($(window).scrollTop() < top_parotulo){
dispara1 = 0;
console.log('dispara1 fuera: ' + dispara1);
}
if($(window).scrollTop() >= top_parotulo && dispara1 == 0){
event.preventDefault();
if(event.originalEvent.deltaY > 0){
$('.rotulo h2').css('left', '-=6');
console.log('dispara1 bajando: ' + dispara1 + ' left: '+ $('.rotulo h2').css('left') + ' windowtop: '+ $(window).scrollTop() + ' toprotulo: ' + top_parotulo);
if($('.rotulo h2').offset().left < -400){//temporal el número sera -1520 y activar todo el texto de rotulo h2
dispara1 = 1;
$('.rotulo h2').css('left', '-400');
}
}
if(event.originalEvent.deltaY < 0){
$('.rotulo h2').css('left', '+=6');
if($('.rotulo h2').offset().left > $(window).width()*70/100){
$('.rotulo h2').css('left', $(window).width()*70/100);
dispara1 = 1;
console.log('dispara1 salido: ' + dispara1);
}
}
}
if($(window).scrollTop() > (top_parotulo + 190) && dispara1 == 1){dispara1 = 0; console.log('dispara1 después: ' + dispara1);}
});
$(document).on('scroll', function(){
var elscroll = $(window).scrollTop();
});
});
