javascript & jquery: detectar cuando un div es visible al hacer scroll

fuente: https://oscargascon.es/como-detectar-con-jquery-si-un-elemento-por-su-posicion-es-visible-en-el-navegador/

Buenas a tod@s

Necesitaba hacer el tipico efecto de aparicion de un elemento DIV al hacer scroll, es decir; al ir bajando por la web para verla que cuando tenga que aparecer un div lo haga con algun efecto de aparicion … frase rara, lo se

Direis «hombre con animate.css por ejemplo, chupao» pues si, con animate.css puedes aplicar cualquier efecto de animacion a un div; pero lo guapo es que ese efecto se aplique cuando aparece en escena el div. Por poner un ejemplo, yo quiero hacerle un efecto al footer el cual esta abajo del todo de la web. Si no implementamos el siguiente codigo javascript + jquery pues le va a aplicar el efecto segun se cargue la web con lo que cuando lleguemos a ver el footer no vamos a ver ningun efectillo. Por mas que intento explicarme decentemente no lo consigo, asi que probar vosotros mismos este codigo y sabreis de lo que hablo xDD

 


function elementVisible(elem) {
var visible = true;
var windowTop = $(document).scrollTop();
var windowBottom = windowTop + window.innerHeight;
windowBottom = windowBottom - 400;
var elementPositionTop = elem.offset().top;
var elementPositionBottom = elementPositionTop + elem.height();
if (elementPositionTop >= windowBottom) {
visible = false;
}
return visible;
}

// invoco una función anónima en el evento scroll sobre window
$(window).on("scroll" ,function() {
let elem = $('#a1'); // obtengo el elemento por id

if(elementVisible(elem)){
elem.addClass('fadeInUp animated');
elem2.addClass('fadeInUp animated');
}

});

El codigo pertenece a Oscar Gascon, yo lo he modificado ligeramente disponible otro tipo de funcionalidades. Podeis ver el artículo original en la siguiente URL: https://oscargascon.es/como-detectar-con-jquery-si-un-elemento-por-su-posicion-es-visible-en-el-navegador/

HTML & CSS: DIV banner y texto desaparece por debajo del contenido web

Buenas a tod@s

Por exigencia del guion necesito hacer un banner o un slide de imagen + texto que al hacer scroll para ver el resto de la web se quede fijo en su posicion desapareciendo por debajo del resto del contenido de la web … frase rara lo se, mal explicado lo se tambien. Probar este codigo y entendereis por donde van los tiros y si alguno de vosotros sabe decirme como se llama esto os agradeceria eternamente que me lo dijerais!

CSS:


#main-header { /* banner que se quedara por debajo del contenido al hacer scroll */
	position:fixed; /* Hacemos que la cabecera tenga una posición fija */	
	z-index: 1;
}

#main-content{ /* contenedor principal */
	z-index: 9999;
	position:relative;
	}

HTML


<body>
        
<div id="main-header">BANNER + TEXTO</div>
	
<section id="main-content">BLA BLA BLA BLA</section>

</body>

Espero haberle servido de ayuda a alguien mas que a mi mala memoria, la proxima vez que me tope de nuevo con esta necesidad ya vengo a tiro fijo

Un saludo !

wordpress: Modificando el Loop de WordPress: query_posts() by guidacode.com

Buenas a tod@s

He añadido un scroll infinito con click en «leer mas» y debajo de los post muestro el resto de post de la categoria … pero me encuentro con el siguiente problema, cada vez que le doy a leer mas vuelve a empezar el bucle de cero y me muestra los mismos resultados de nuevo y no los siguientes

Esto es debido a que no tuve en cuenta que query_posts() debe prepararse para paginación o no … y lo estaba usando como si no tuviera paginacion

Resultados con paginacion:


<?php

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts("cat=$idioma&paged=$paged");

if(have_posts()):while(have_posts()):the_post();

?>

No me daba cuenta de mi error hasta que lei el artículo de anieto2k.com aqui: http://www.anieto2k.com/2008/08/13/query_posts-y-el-problema-de-la-paginacion/ me ha servido de mucha ayuda, muchas gracias !

wordpress: scroll infinito o Load More

Buenas a tod@s

Por exigencias ajenas a mi necesitaba un scroll infinito pero que fuera clickando y no automatico, es decir; cuando llegas al final de los posts visualizados que se carguen mas sin recargar la web pero solo si el usuario hace click

Gracias al plug-in Easy Load More en dos minutos lo tendremos preparado:

  • lo descargamos y lo instalamos
  • lo activamos y vamos a configuracion
  • en el primer campo nos solicita Post List Wrap Selector aqui debemos indicar el id del div que contiene el bucle que muestra los posts
  • guardamos y a continuacion vamos al php donde queremos agregar el boton load more
  • tenemos que incluir load_more_button(); entre las marcas de codigo php justo despues del cierre del contenedor o div donde esta el bucle

Yo lo he probado y funciona muy bien, ahora queda css y dejarlo bonito. Suerte!

Javascript – On Scroll Header / invocar evento al mover el scroll vertical

Buenas a tod@s

Este articulo se refiere a la posibilidad de realizar acciones derivadas del movimiento vertical del scroll … para entendernos mejor; yo tengo una cabecera (header) que mide de alto 100px y quiero que cuando el usuario desplace verticalmente la web para ver el contenido el header pase de 100px a 50. Pues gracias a este javascript podremos controlar este tema

Os dejo link del articulo completo y el codigo, a mi me ha servido de mucha ayuda –> https://www.w3schools.com/howto/howto_js_sticky_header.asp

Un saludo

wordpress: scroll infinito para paginar contenidos by ayudawp.com

UPDATE: no pierdas el tiempo en este post, no se que paso que te lleva a un enlace pa descargar un .js y no la carpeta del plugin. Vete a este otro post que he publicado que funciona perfecto: https://coudlain.wordpress.com/2018/12/20/wordpress-scroll-infinito-o-load-more/
wordpress: scroll infinito para paginar contenidos by ayudawp.com

fuente: https://ayudawp.com/scroll-infinito-en-wordpress/

fragmento del artículo, para ver completo ir a https://ayudawp.com/scroll-infinito-en-wordpress/

… no tienes que ir haciendo clic a enlaces del tipo de “página siguiente” sino que cuando llegas a bajo de una web esta se va extendiendo, mostrando más contenido, hasta el infinito …Hay un plugin, Infinite-Scroll, basado en jQuery, que nos ofrece exactamente esto. Solo hay que instalarlo y activarlo y ya tenemos scroll infinito en nuestro WordPress …

jQuery: Scroll animado hasta un anclaje by webintenta

Fuente: http://webintenta.com/jquery-scroll-animado-hasta-un-anclaje.html

La siguiente función permite crear un agradable efecto de scroll para desplazarse hasta un anclaje. Tan sólo hay que añadir la clase «toplink».

$("a.toplink").click(function() {
	$("html, body").animate({
		scrollTop: $($(this).attr("href")).offset().top + "px"
	}, {
		duration: 1000,
		easing: "swing"
	});
	return false;
});

Ver ejemplo en funcionamiento » »
Visto en snipplr » »

Crear scrollbar en flash/actionscript más efecto de easing by CristaLab

Fuente: CristaLab

Muchas veces al visitar otros sitios y al usar un scroll de estos sitios, uno ve el efecto de easing en el scroll y nos da una sensación a suavidad muy buena, es agradable que las cosas «scrolleen» con ese suavizado tan particular, bueno asi que me puse mano a la obra para poder tener el mio, pero quise hacerlo de tal manera de que lo pueda reutilizar SIEMPRE, que ejecute una función determinada en cualquier nivel de mi película.

Para lograrlo a esta función debemos de pasarle un par de parámetros, veamos…

Primero vamos a hacer un include de un ActionScript (este archivo es necesario para que funcione el scroll porque tiene todo el código necesario), se lo pueden bajar de aquí y ponen ese archivo en la misma carpeta del .FLA.
Hacemos por única vez un INCLUDE en nuestro fla en el _ROOT

#include «scroll_easyn.as»

Luego en nuestro fla cada vez que quisieramos generar éste scroll solo vamos a convocar a una función que se encuentra dentro del archivo que incluimos … de ésta manera:

_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado);

Bueno la función requiere un par de parámetros:

nivel: Es en donde vamos a generar el scroll por ejemplo: «_root.», _root.mcCont, etc.

clip: Este parametro es la ruta del CLIP CONTENEDOR, o sea el nombre de instancia del clip en donde dentro del que tenemos nuestro contenido que queremos scrollar. (Es importante que en nivel, y clip quede algo como por ejemplo: Nivel: «_root.mc» Clip: «_root.mc.contenedor»)

anchoScroll: Es un valor numérico en el cual le seteamos el ancho que va a tener la barrita de scroll, si el valor es menor a 3, el valor va a ser por default 3.

Suavizado (Opcional) Valor numérico en donde seteamos la velocidad del suavizado cuando frenamos el scroll, si obviamos éste parámetro el valor por default es 10.

Bueno eso es todo pueden ver una prueba, acá de como funciona.
Los sources se los pueden descargar desde aquí.

Entonces cada vez que quisieramos usar el scroll solo escribimos ésto:

var nivel = _root.mc
var clip = _root.mc.contenedor
var anchoScroll= 8
var suavizado = 3
_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado );
O bien directamente:
_root.generarScrollEasyn(_root.mc, _root.mc.contenedor, 8, 3);

El scroll funciona tanto para texto, enmascarado con «SETMASK» o bien para texto e imágenes.

Saludos y espero que les sirva
dQ (Digital Designer)

Descargar Archivo desde CristaLab