/ JavaScript

Implementar Menú Web Fixed con Headroom.js

Implementar menú web fixed (fijo) con Headroom.js, es exageradamente sencillo, lo bueno de esta librería es que nos permite mostrar el menú web solo cuando sea necesario para que tengas mucho más espacio en la pantalla.

Vamos a implementar Headroom.js de la forma más simple para que no tengas problemas a la hora de agregarlo en tu proyecto web.

Página Oficial

Headroom.js

Aquí puedes descargar la librería, también puedes ver la documentación de Headroom.js.


Pasos para la Implementación de Headroom.js

Código HTML

<header>
 <nav class="headroom animated">
  <ul>
   <li><a href="index.html">Inicio</a></li>
   <li><a href="swing.html">Swing</a></li>
   <li><a href="flip.html">Flip</a></li>
   <li><a href="bounce.html">Bounce</a></li>
  </ul>
 </nav>
</header>

Código CSS Base

body{
 /*el margin-top es 48px para que el texto inicial no sea ocultado por el menú*/
 margin: 68px 0 0 0;
}
nav{
 background: #64A1F4;
 padding: 15px;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
}
nav ul{
 list-style-type: none;
 padding-left: 0;
 margin-top: 0;
 margin-bottom: 0;
}
nav ul li{
 display: inline-block;
}
nav ul li + li{
 margin-left: 10px;
}
.headroom {
 animation-duration:1s;
 animation-fill-mode:both;
 will-change: transform;
 transition: transform 200ms linear;
}
.headroom--pinned{
  transform: translateY(0%);
}
.headroom--unpinned{
  transform: translateY(-100%);
}

Código JavaScript

Colocar el siguiente código antes etiqueta de cierre </body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/headroom.min.js"></script>
<script src="js/jQuery.headroom.js"></script>
<script>
$('.headroom').headroom({
 'tolerance': {
  'down' : 10,
  'up' : 20
 },
 'offset' : 205,
 'classes': {
  'initial': 'headroom',
  'pinned': '',
  'unpinned': ''
 }
});
</script>

Efectos de Headroom.js

Vamos a implementar los 4 efectos que vienen integrado con Headroom.js que son el Slide (diapositiva), Swing (oscilación), Flip (dar la vuelta), Bounce (rebotar).

Efecto Slide (diapositiva)

Este es el efecto que viene integrado por defecto en Headroom.js.

Código JavaScript

<script>
$('.headroom').headroom({
 'tolerance': {
  'down' : 10,
  'up' : 20
 },
 'offset' : 205,
 'classes': {
  'initial': 'headroom',
  //Nombre de la clase css que se agrega cuando el usuario sube
  'pinned': 'slideDown',
  //Nombre de la clase css que se agrega cuando el usuario baja
  'unpinned': 'slideUp' 
 }
});
</script>

Código CSS

Clases css.

.slideDown{
 transform: translateY(0%);
}
.slideUp{
 transform: translateY(-100%);
 }

Efecto Swing (oscilación)

Implementar el efecto de oscilación para nuestro menú web con Headroom.js.

Código JavaScript

<script>
$('.headroom').headroom({
 'tolerance': {
  'down' : 10,
  'up' : 20
 },
 'offset' : 205,
 'classes': {
  'initial': 'headroom',
  //Nombre de la clase css que se agrega cuando el usuario sube
  'pinned': 'swingInX',
  //Nombre de la clase css que se agrega cuando el usuario baja
  'unpinned': 'swingOutX' 
 }
});
</script>

Código CSS

Clases css y keyframes.

@keyframes swingInX {
  0% {
     transform: perspective(400px) rotateX(-90deg);
  }
  
  100% {
     transform: perspective(400px) rotateX(0deg);
  }
}
.animated.swingInX {
  transform-origin: top;
  backface-visibility: visible !important;
  animation-name: swingInX;
}

@keyframes swingOutX {
  0% {
     transform: perspective(400px) rotateX(0deg);
  }
	100% {
    transform: perspective(400px) rotateX(-90deg);
  }
}

.animated.swingOutX {
  transform-origin: top;
  animation-name: swingOutX;
  backface-visibility: visible !important;
}

Efecto Flip (dar la vuelta)

Implementar el efecto de dar la vuelta para nuestro menú web con Headroom.js.

Código JavaScript

<script>
$('.headroom').headroom({
 'tolerance': {
  'down' : 10,
  'up' : 20
 },
 'offset' : 205,
 'classes': {
  'initial': 'headroom',
  //Nombre de la clase css que se agrega cuando el usuario sube
  'pinned': 'flipInX',
  //Nombre de la clase css que se agrega cuando el usuario baja
  'unpinned': 'flipOutX' 
 }
});
</script>

Código CSS

Clases css y keyframes.

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.animated.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
}

@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.animated.flipOutX {
  animation-name: flipOutX;
  backface-visibility: visible !important;
}

Efecto Bounce (rebotar)

Implementar el efecto de rebotar para nuestro menú web con Headroom.js.

Código JavaScript

<script>
$('.headroom').headroom({
 'tolerance': {
  'down' : 10,
  'up' : 20
 },
 'offset' : 205,
 'classes': {
  'initial': 'headroom',
  //Nombre de la clase css que se agrega cuando el usuario sube
  'pinned': 'bounceInDown',
  //Nombre de la clase css que se agrega cuando el usuario baja
  'unpinned': 'bounceOutUp' 
 }
});
</script>

Código CSS

Clases css y keyframes.

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }

  60% {
    opacity: 1;
    transform: translateY(30px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}
.animated.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceOutUp {
  0% {
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    transform: translateY(-200px);
  }
}
.animated.bounceOutUp {
  animation-name: bounceOutUp;
}

Puedes ver la demo de todos los efectos para nuestro menú web con la ayuda de CSS y la librería Headroom.js.

Ver Código en GitHub

Luis Rene Mas Mas

Luis Rene Mas Mas

Soy desarrollador front-end, me encanta las nuevas tecnologías web, administrar este blog es mi pasatiempo favorito.

Leer Más