Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Efecto fade-in sin usar Flash (con CSS y javascript)
Experiencia de usuario
25/11/2004
|
Daniel Torres Burriel
¿Quieres dotar a alguna imagen de un efecto en el que ésta aparece de forma gradual, pero sin usar Flash, y que el resultado sea accesible? Pues estás de enhorabuena. Onload image fades without Flash de Richard Rutter es una técnica que aprovecha el uso de unas reglas propietarias, mientras llega CSS3, para que un amplio abanico de navegadores puedan mostrar los resultados de su aplicación.
¿El secreto?
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = «alpha(opacity:»+opacity+»)»;
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presenciales. Contacta con nosotros y cuéntanos tus necesidades.
Lamentablemente estoy en ello, pero este ‘hack’ no es posible para IE5 Mac. Mi cliente está desesperado…
Cuando lo consiga os aviso