Tengo un evento JQuery que me gustaría repetir cada vez que se desplaza el mouse. Actualmente se ejecutará una vez, agregará el CSS y luego aparentemente se volverá completamente inactivo.

Estoy aprendiendo JQuery, originalmente estaba usando .scroll pero eso no aplicaría el CSS incluso una vez, así que no estoy usando .bind con la rueda del mouse. He intentado un evento .onclick pero esto hace lo mismo y realmente no sé qué más probar.

$(document).ready(function () {
    $(window).bind('mousewheel', function() {
        $(".perspective-line p").css({
            transform: 'translate(0, -50px)',
        });
    });
});

Mi texto se transforma una vez por 50 píxeles, pero luego se queda atascado allí y quiero que se transforme nuevamente cuando se mueva la rueda del mouse.

Editar * nuevo script

$(document).ready(function () {
    var increasedValue = 0;
    $(window).bind('mousewheel', function() {
        increasedValue += 50;
        $(".perspective-line p").css({
            transform: 'translate(0, -${increasedValue}px)',
        });
        console.log(increasedValue)
    });
});
3
Harry Whitnear 2 oct. 2019 a las 16:59

3 respuestas

La mejor respuesta

Los eventos se disparan como de costumbre. Estableces un valor fijo en CSS, puedes probar algo así con la configuración dinámica:

$(document).ready(function () {
    var increasedValue = 20; 
    $(window).bind('mousewheel', function() {
    increasedValue ++;
        $(".perspective-line p").css({
            transform: `translate(0, -${increasedValue}px)`,
        });
    });
});
4
Oleg Bondarenko 2 oct. 2019 a las 14:05

Creo que su código está agregando actualmente la regla transform: 'translate(0, -50px)', css, pero lo que probablemente quiera es aumentar su translate en 50px en cada evento de mousewheel. Probablemente necesite guardar su valor de transformación actual y luego, en cada rueda del mouse, incluso incremente este valor y use ese valor incrementado dentro de la regla css. También es posible que desee verificar si el desplazamiento estaba hacia arriba o hacia abajo e incrementar o disminuir su valor guardado.

$(document).ready(function () {
    var currentTranform = 0;
    $(window).bind('mousewheel', function() {
        currentTranform -= 50;
        $(".perspective-line p").css({
            transform: 'translate(0, currentTransform + "px")',
        });
    });
});
0
Nick Surmanidze 2 oct. 2019 a las 14:07

Agregue console.log('scroll'); en su función y verá que se dispara cada vez que se desplaza. El problema que tiene es que tiene transform: 'translate(0, -50px)' y siempre tiene el mismo valor, por lo que los ojos no pueden verlo :)

1
Sergo Kupreishvili 2 oct. 2019 a las 14:06