Ahora mismo colaboro como programador en Barriga Estudio, estudio de fotografía, diseño y producción de video. Puedes consultar nuestro portfolio de trabajos web actualizado en nuestra web Creaciones Online - Diseño Web.

Filtrar por

Categorías

Etiquetas

RSS

Cambiar tamaño de logotipo al hacer scroll en una web con jQuery

Compartir conocimiento es gratis...Share on Google+0Tweet about this on TwitterShare on Facebook0Share on LinkedIn0Pin on Pinterest0
El efecto que queremos conseguir es algo parecido a lo que se muestra en el logotipo de la web de IBM: http://www.ibm.com/es/es/ El HTML del logo sería algo así como:
  
Y la función de jQuery para cambiarlo de tamaño al hacer scroll sería algo así (la imagen cambiaría de tamaño al hacer 200px de scroll hacia abajo y volvería a su tamaño original al hacer scroll al inicio de la página). Esta función nos sirve tanto para cambiar el tamaño de la imagen del logo, como para cambiar la propia imagen:
jQuery(function(){
    jQuery(window).scroll(function(){
        if(jQuery(this).scrollTop() > 200) {
            jQuery('#logo-img img')
                .css({'width':'351px','height':'63px'})
                .attr('src','http://luismi.sanchezarteaga.es/contenido/uploads/2014/02/luismi.sanchezarteaga1.png');
        }
        if(jQuery(this).scrollTop() < 200) {
            jQuery('#logo-img img')
                .css({'width':'196px',
                'height':'166px',
		'-webkit-transition':'all 0.5s ease',
		'-moz-transition':'all 0.5s ease',
		'-ms-transition':'all 0.5s ease',
		'-o-transition':'all 0.5s ease',
		'transition':'all 0.5s ease'
                	})    
                .attr('src','http://luismi.sanchezarteaga.es/contenido/uploads/2014/02/logo2.png');
        }
    });
});
Puedes juguetear con los diferentes resultados en JSFiddle:
Luismi Sánchez Arteaga (http://luismi.sanchezarteaga.es)
Programador web y Gestor CMS.

3 comentarios

Graciasss :) justo lo que buscaba..

Añade un comentario

Por favor, corrige el formulario

requerido*