Estaba jugando con mi nuevo Nexus 7 (realmente quería tener un dispositivo Android real) y noté un pequeño efecto en la aplicación Google+ que viene con él. A medida que desliza el dedo hacia abajo, los nuevos módulos de contenido se deslizan hasta su lugar. El video es mejor aquí:
¡Podemos hacerlo! Es un proceso bastante fácil de dos pasos:
Cuando la ventana se desplace, verifique si el módulo está visible
jQuery tiene un selector visible, pero eso no es lo que necesitamos aquí. Necesitamos ver si alguna parte del elemento está dentro de la ventana gráfica. Es decir, un elemento puede ser técnicamente visible, pero ubicado fuera de la pantalla. Podemos averiguar si un elemento está dentro de la ventana gráfica a través de las matemáticas. Qué tan ancha y alta es la ventana, qué tan abajo está desplazada, qué tan ancha y alta es el elemento, dónde está posicionado, etc. Afortunadamente, esa matemática se resume muy bien con el complemento jquery-visible.
(function($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);Todo lo que nos queda es usarlo cuando la ventana “se desplaza” para agregar un nombre de clase.
$(window).scroll(function(event) {
$(".module").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});CSS manejará el deslizamiento:
.come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s; /* So they look staggered */
}
@keyframes come-in {
to { transform: translateY(0); }
}Si los elementos ya son visibles, déjelos ser
Por lo tanto, no activamos la animación en los módulos ya visibles en el primer deslizamiento, agregaremos un nombre de clase para eliminar esa animación. Y podemos ser un poco más eficientes aquí también, “almacenando en caché” los selectores para que no tengamos que encontrarlos en cada evento de desplazamiento (que se dispara muchas veces).
var win = $(window);
var allMods = $(".module");
// Already visible modules
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
});
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});Eso servirá:
ver la pluma
Deslízate desde los cuadros inferiores por Chris Coyier (@chriscoyier)
en CodePen.
Y tenga en cuenta que la transición de CSS podría ser cualquier cosa. Podrían deslizarse desde los lados, podrían usar escala y opacidad y lucir como si estuvieran volando. Podría haber color involucrado. Lo que sea.