Comunidad de diseño web y desarrollo en internet online

Menu Fijo

Citar            
MensajeEscrito el 27 Jun 2015 01:03 am
Buenas tardes alguien me podria decir este efecto en el menu como lo puedo hacer o como se llama si se fijan en el link al bajar la pagina el menu se vuelve mas pequeño pero con animacion

[url=http://themexlab.com/buffalo/home-version-2/][/url]

Por tjmysteri

Claber

138 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Jun 2015 03:46 am
Hay que asignarle la propiedad transition a la imagen. Después con jquery detectamos cuando se haga scroll.. y le decimos que si se scrollea más de determinada cantidad de pixeles, la imagen cambie de tamaño. Todo esto sin asignarle un alto fijo al contenedor, sino no va a modificar su tamaño.

Código CSS :

.logo{
   width:100%;
   -webkit-transition:all .3s linear;
   -moz-transition:all .3s linear;
   -ms-transition:all .3s linear;
   -o-transition:all .3s linear;
   transition:all .3s linear;   
}


Código Javascript :

$(window).scroll(function(){
   
    if($(this).scrollTop() >= 200){
         
         $(".logo").width("50%")
         
      }
   
      else{
         
         $(".logo").width("100%")
         
      }
   
});


Te dejo un ejemplo de cómo lo haria yo.. imitando un poco el diseño que pasaste.

http://codepen.io/fede5426/pen/xGpEpR

No es responsive y lo hice en un monitor de 23", si se ve mal sepan entender que solamente era un ejemplo, el efecto funciona igual..

Saludos :)

Por fede5426

20 de clabLevel



 

chrome
Citar            
MensajeEscrito el 01 Jul 2015 01:06 am
Mi estimado en vdd agradecido mil Gracias Saludos desde Tijuana MX

Por tjmysteri

Claber

138 de clabLevel



 

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.