Ahora mismo colaboro como programador en Esferize Comunicaciones. Puedes echar un vistazo a todo lo que hacemos en nuestra web.

Filtrar por

Categorías

Etiquetas

RSS

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

Compartir conocimiento es gratis...Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
0Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest
0
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','https://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','https://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*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.