• Publicidad
  • Contacto
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco
Sin resultados
Ver todos los resultados

Tutorial – Efecto fondo animado con Javascript

Diego CambiasoporDiego Cambiaso
03/07/2009
enDesarrollo/programación, Diseño, Internet, Recursos
Tiempo de lectura2 minutos
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

youlove-usSi como yo, no eres amante de usar tecnología Flash para hacer animaciones en una página web, te va a gustar el tutorial que publican en Youlove.us que permite crear un fondo animado con Javascript. Antes de seguir leyendo te recomiendo que visites la página para que comprendas exactamente de que se trata y veas lo vistoso que es es efecto.

Cómo funciona

La técnica usada en este efecto consiste en desplazar un fondo detrás de un PNG transparente.

Son necesarias 4 imágenes: el fondo (background), el encabezado (header), contenido y pie de página (footer).

Todo el contenido se oculta al principio desde las CSS.

Contenidorelaciondo

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022

Samsung e IBM lanzan el reto “Call for Code”para homenajear a los héroes de la vida

09/11/2021

youloves.us

Javascript

Se utiliza jQuery y además la biblioteca backgroundposition.js para mover el fondo.

Este es el Javascript utilizado:

$(function() {
// *** Desplazar fondo

// altura de la imágen de fondo en píxeles
var backgroundheight = 4000;

// minutos/hora actual
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// cálculos de tiempo, los convierte en porcentajes
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 60 / 24 * 100;
var percentofday = hourpercent + minutepercent;

// calcula cual linea de píxeles comenzar
 var startoffset = backgroundheight / 100 * percentofday;

// cálculos de desplazamiento
var endoffset = startoffset + backgroundheight;

   function scrollbackground() {
// posición inicial de la imágen del fondo
$('body').css({
backgroundPosition: '50% -' + startoffset + 'px'
});
// animar hasta el final
$('body').animate({
backgroundPosition:'(50% -' + endoffset + 'px)'
},
100000,
"linear",
function () {

scrollbackground();
}
);
}

// comenzar la animación
scrollbackground();
}

El Javascript traduje algunos de los comentarios para orientación, pero aconsejo examinar el tutorial original que está en inglés en el sitio de Youlove.us.

Web: youlove.us/blog/the-youloveus-scrolling-background-effect-explained

Notas finales:

Estuve haciendo pruebas y estudiando la documentación, en verdad el efecto me parece muy vistoso, pero en un par de ocasiones consumió bastantes recursos y volvio muy lento el navegador (pruebas realizadas en Firefox 3.0.11 bajo Linux), así que recomiendo probar con diferentes tamaños en la implementación.

Vía: delicious.com/popular

Tags: CSSefecto jqeuryfondo animadoJavascriptjavascript biblitoecaRecursosTutoriales
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

Contenido Relacionado

Noticias

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022
Recursos

4 Tips de Oracle para iniciarte en el mundo de la programación

12/04/2022
Transformación Digital

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022
Cargar más

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Sin resultados
Ver todos los resultados
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2023 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...