javascript: funcion temporizador, ejecutar accion despues de x tiempo

buenas a tod@s

el titulo no me deja margen a explicar mas …


var timout;
function MiFuncionJS(){
timout=setTimeout(function(){
document.getElementById("headerslider").style.visibility="visible";
},500,"JavaScript");
}

donde 500 es medio segundo … se trata de una inicializacion de propiedad de un DIV. Cuando llamamos a la funcion tarda medio segundo en realizar la accion

Anuncios

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

fuente: http://www.falconmasters.com/web-design/efecto-parallax-sencillo/

Por aqui os dejo el javascript (necesita cargar libreria jquery)


$(document).ready(function(){
$(window).scroll(function(){
var barra = $(window).scrollTop();
var posicion = (barra * 0.80);
$('#paralax').css({'background-position': '0 -' + posicion + 'px'});
});
});

y este sera nuestro DIV


<div id="paralax" style="background-image: url(img/banner-2.jpg);background-repeat:repeat;background-attachment: fixed;height: 565px;width: 100%;background-size: cover;background-position:center;"></div>
});

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/

Javascript: calcular el tamaño de la ventana del navegador

Buenas a tod@s

Si necesitais saber que tamaño tiene la ventana del navegador (ancho y alto) para por ejemplo mostrar unos estilos CSS u otros con javascript porque por lo que sea con CSS no podeis … este es vuestro codigo:

 

function tamVentana() {
  var tam = [0, 0];
  if (typeof window.innerWidth != 'undefined')
  {
    tam = [window.innerWidth,window.innerHeight];
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth !=
      'undefined' && document.documentElement.clientWidth != 0)
  {
    tam = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
    ];
  }
  else   {
    tam = [
        document.getElementsByTagName('body')[0].clientWidth,
        document.getElementsByTagName('body')[0].clientHeight
    ];
  }
  return tam;
}

Un saludo

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