javascript - animate - Ajustar la opacidad de CSS con el desplazamiento del elemento con jQuery

jquery animate opacity

Question

Hola, quiero vincular la opacidad CSS de dos div con la cantidad de ese elemento que se desplaza.

Por ejemplo, decir que tengo dos divs:

<div class="red" style="background:red"></div>
<div class="blue" style="background:blue"></div>

A medida que el div rojo llega a la ventana gráfica, su opacidad va de 0 a 100, dependiendo de la cantidad desplazada.

Del mismo modo que el div azul llega a la ventana gráfica, su opacidad va de 100 a 0, dependiendo de la cantidad desplazada.

Encontré esta animación Jquery / Javascript Opacity con desplazamiento -

    var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
    ,fading = $(''#fading'')
;

$(window).bind(''scroll'', function(){
    var offset = $(document).scrollTop()
        ,opacity=0
    ;
    if( offset<=fadeStart ){
        opacity=1;
    }else if( offset<=fadeUntil ){
        opacity=1-offset/fadeUntil;
    }
    fading.css(''opacity'',opacity).html(opacity);
});

sin embargo, la cantidad de desplazamiento está vinculada a la altura del documento, en lugar de a la div misma.

Aquí hay un jsfiddle para trabajar desde http://jsfiddle.net/RPmw9/

Gracias por adelantado.

Answer 1

Depende de cuándo quieras que sea totalmente opaco o no, pero esto podría ser un comienzo:

»» Fiddle «« (Versión de clase de elementos múltiples - establecer individualmente)

»» Fiddle «« (Versión de clase de elemento único - si solo un elemento por clase)

function fader() {
    var r = $(''.red''),   // The .red DIV, as variable so we do not have to look
                         // it up multiple times.
        b = $(''.blue''),  // Same for blue.
        wh = $(window).height(),      // Height of window (visible part).
        dt = $(document).scrollTop(), // Pixels document is scrolled down.
        /* red offset top is a semi static values which say how many pixels it
         * is from the top of the document.
         * "Red Offset Top" - "Document Scroll Top" gives us how many pixels
         * the red DIV is from top of visible window.
         * "Window Height" - that value gives us pixels the red DIV is from top
         * normalized to start from 0 when top of DIV is at bottom of window.
         * */
        redView  = wh - (r.offset().top - dt),
        // Same for blue DIV
        blueView = wh - (b.offset().top - dt),
        // Variable to save opacity value.
        op;
    /* If redView is bigger then 0 it means the DIV has top border above bottom
     * of window. 
     */
    if (redView > 0) {
        /* Opacity goes from 0 - 1 so we divide 1 by window height and
         * multiplies it with pixels red DIV is from bottom.
         * In addition we add the height of the red DIV to window height, such
         * that we set opacity until it is out of view (Bottom border is at top
         * of window, and not only until it has top border at top of window.)
         */
        op = 1 / (wh + r.height()) * redView;
        /* If value of calulation is less or equal to one, it is in visible
         * view and we set the opacity accordingly.
         */
        if (op <= 1)
            r.css(''opacity'', op);
    }
    if (blueView > 0) {
        op = 1 - 1 / (wh + b.height()) * blueView;
        if (op >= 0)
            b.css(''opacity'', op);
    }

    // Add this line for a possible help in understanding:
    console.log(
         ''Window Height:'', wh, 
         ''Doc Scroll Top'', dt, 
         ''Red offset top:'', r.offset().top, 
         ''Red offs.top - Doc Scroll Top'', r.offset().top - dt, 
         ''View:'', wh - (r.offset().top - dt)
    );
}
// Attach scroll event to the function fader()
$(document).bind(''scroll'', fader);

DE ACUERDO. Se agregaron algunos comentarios. Puede que no sienta que es la mejor explicación. Una mejor manera de entenderlo es tal vez echarle un vistazo a los valores, así que también agregué una línea console.log() dentro de la función fader() . Abra su consola y vea los valores mientras se desplaza. Fiddle con el registro . También tenga en cuenta esta diferencia de rendimiento . style es considerablemente más rápido.

Versión dos:

Esto establece la opacidad total cuando el elemento tiene la parte superior en la parte superior de la ventana (no la parte inferior del elemento). Tenga en cuenta que también podríamos usar Math.min() en la función anterior, para omitir la variable op y if (op <= 1) y if (op >= 0) instrucción, pero no al menos un punto de referencia rápido en jsperf reveló la versión if para realizar un poco mejor. Si tiene muchos elementos que estilo debe utilizar la versión if .

»» Fiddle ««

function fader() {
    var r = $(''.red''),
        b = $(''.blue''),
        wh = $(window).height(),
        dt = $(document).scrollTop(),
        redView  = wh - (r.offset().top - dt),
        blueView = wh - (b.offset().top - dt);
    if (redView > 0) {
        // Math.min() returns the lowest of given values. Here we do not want
        // values above 1.
        $(''.red'').css(''opacity'', Math.min(1 / wh * redView, 1));
    }
    if (blueView > 0) {
        $(''.blue'').css(''opacity'', 1 - Math.min(1 / wh * blueView, 1));
    }
}
// Event on scroll
$(document).bind(''scroll'', fader);