Categorías
Tecnología

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

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:

<div id="logo-div">
   <a id="logo-img" href="https://luismi.sanchezarteaga.es/"></a>
</div>

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:

Por Luismi Sanchez

Full Stack Developer

4 respuestas a «Cambiar tamaño de logotipo al hacer scroll en una web con jQuery»

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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