Activación de un evento jquery cuando aparece un elemento en la pantalla

Question

Deseo mostrar un efecto de fundido tan pronto como el elemento aparezca en la pantalla. Hay mucho contenido antes de este elemento, así que si disparo el efecto en document.ready, en ciertas resoluciones los vistors no lo verán.

¿Es posible activar un evento cuando, después de desplazarse hacia abajo, el elemento se vuelve visible? Estoy casi seguro de haber visto este efecto antes, pero no tengo idea de cómo lograrlo.

¡Gracias!

Answer 1

jQuery El complemento Waypoints podría ser útil. Proporciona una forma de activar una acción cuando un elemento se vuelve visible en la pantalla.

Por ejemplo:

$('.entry').waypoint(function() { 
    alert('The element has appeared on the screen.'); 
}); 

Hay algunos ejemplos en the site of the plugin.

Answer 2

Una búsqueda rápida resultó en esta extensión viewport para jQuery que le permitirá verificar la visibilidad de un elemento en la ventana gráfica. Si su elemento no está en la ventana gráfica, no realice su animación de fundido de entrada.

Answer 3

Creo que te refieres a la jQuery plug-in "Lazy Load": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

De mirar el código fuente, parece que el plugin está haciendo algo como esto:

$('#item').one('appear', function() { 
    // Do stuff here 
}); 

Answer 4

Esto funciona mejor para mí, entonces los otros en este post: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

uso es simple:

$('#element').visible() 

Se puede ver cómo se utiliza este plugin para crear su efecto aquí:

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

function viewable() { 
    $(".module").each(function(i, el) { 
     var el = $(el); 
     if (el.visible(true)) { 
      el.addClass("come-in"); 
     }); 
    } 
$(window).scroll(function() { 
    viewable(); 
}); 
$(window).blur(function() { 
    viewable(); 
}); 

Si usa pestañas. (por ejemplo, pestañas de jQuery UI) debe verificar si la pestaña está activa.

$(window).scroll(function() { 
    if($('#tab-1').hasClass('active')) { 
     viewable(); 
    } 
}); 

Answer 5

Jquery.appear plugin es la mejor manera de resolver este problema.

demo.

Answer 6

Si usted está buscando para desencadenar un evento cuando un especificado, o blanco, elemento desplaza a la vista, se puede hacer esto mediante la determinación de los valores siguientes:

1. la altura de la ventana
2. la valor de la distancia de desplazamiento desde la parte superior de la ventana
3. el especificado, o de destino, la distancia a elemento de la parte superior de la ventana

considerar lo siguiente:

jQuery(window).on('scroll', function(){ 

    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top), 
     windowHeight = jQuery(window).height(), 
     windowScrollValFromTop = jQuery(this).scrollTop(); 

    // if the sum of the window height and scroll distance from the top is greater than the target element's distance from the top, it should be in view and the event should fire, otherwise reverse any previously applied methods 
    if ((windowHeight + windowScrollValFromTop) > elValFromTop) { 
     console.log('element is in view!'); 
     jQuery('.target-el').addClass('el-is-visible'); 
    } else { 
     jQuery('.target-el').removeClass('el-is-visible'); 
    } 

}); 

Fragmento de código de demostración:

La continuación fragmento demuestra un ejemplo práctico de un tema común: la fijación de un elemento a la vista cuando se desplaza por los elementos especificados en la visión.

/* Sticky element on-scroll */ 
 
jQuery(window).on('scroll', function(){ 
 

 
    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top), 
 
     elHeight = jQuery('.target-el').outerHeight(), 
 
     windowHeight = jQuery(window).height(), 
 
     windowScrollValFromTop = jQuery(this).scrollTop(), 
 
     headerHeightOffset = jQuery('.fixed-header').outerHeight(); 
 
     
 
    if ((windowHeight + windowScrollValFromTop) > elValFromTop) { 
 
     console.log('element is in view!'); 
 
     console.log(headerHeightOffset); 
 
     jQuery('.will-change-el').addClass('fixed-el').css('top',headerHeightOffset).text('fixed'); 
 
    } else { 
 
     jQuery('.will-change-el').removeClass('fixed-el').css('top','0').text('static'); 
 
    } 
 
    
 
    // using template literals for multi-line output formatting 
 
    // comment out to observe when target element comes into view 
 
    console.log(` 
 
     how far is the target element from the top of the window: ${elValFromTop} 
 
     what is the target element's height: ${elHeight} 
 
     what is the window height: ${windowHeight} 
 
     what is the window's scroll value distance from the top: ${windowScrollValFromTop} 
 
     what is the sum of the window height and its offset value from the top: ${windowHeight + windowScrollValFromTop} 
 
     `); 
 
     
 
});

/* || Reset & Defaults */ 
 
body { 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    font-family: arial; 
 
} 
 

 
/* || General */ 
 
.target-el { 
 
    border-top: 1px solid #ccc; 
 
} 
 

 
.target-el, 
 
.will-change-el { 
 
    transition: .7s; 
 
    text-align: center; 
 
    background: #ededed; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.fixed-el { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.fixed-header { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100px; 
 
    text-align: center; 
 
    background: #ededed; 
 
    border-bottom: 1px solid #ccc; 
 
    z-index: 9; 
 
} 
 

 
.buffer-el { 
 
    height: 1000px; 
 
    padding-top: 100px; 
 
    background: whitesmoke; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fixed-header"> 
 
    <h1>Fixed Header</h1> 
 
</div> 
 
<div class="buffer-el"> 
 
    <div class="will-change-el">static</div> 
 
</div> 
 
<div class="target-el">the target element</div>

recinto de seguridad Ejemplo:CodePen

NOTA:
Esto sólo se aplicará a desplazarse acciones sobre el documento y no a los elementos anidados contenidos dentro de un panel de vista de desplazamiento .

Answer 7

Si desea una simple y trabaja sollution:

function elementInView(elem){ 
    return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ; 
}; 

$(window).scroll(function(){ 
    if (elementInView($('#your-element'))) 
    //fire at will! 
    console.log('there it is, wooooohooooo!'); 
});