Como crear un encabezado fijo animado

fwpadmin 3 abril, 20173 abril, 2017 3 comentarios

A la hora de diseñar un encabezado fijo, siempre debemos analizar cuántos links vamos a colocar en él. Balancear la cantidad de links puede ser difícil, ya que hay ocasiones en las que colocar mucha información no nos permite mostrar adecuadamente el contenido y otras en las que dejamos por fuera vínculos importantes. Aquí aprenderemos a realizar un encabezado fijo animado que nos ayudará con esta tarea.

Por otro lado, siempre existe la duda sobre cómo presentar las opciones de navegación a medida que los usuarios se desplazan hacia abajo de la página. Este último punto puede ser resuelto por un encabezado fijo estándar (o sticky header en inglés), que permanece fijo en la parte superior de una pantalla. El primero se puede abordar mostrando más opciones al cargar la página y ocultar ciertos elementos menos importantes al desplazarse. Estos dos enfoques se combinan en última instancia en un encabezado fijo animado.

Encabezado fijo animado

Un encabezado fijo animado resuelve muchos de los problemas antedichos teniendo dos vistas distintas: (1) la cabecera completa que puede incluir tu logo, navegación, vínculos sociales; Y (2) el encabezado fijo que comprime todo a penas se hace scroll. Esto ayuda a mantener la integridad del diseño a medida que tu sitio web se carga y, sin embargo, conserva el espacio necesario mientras proporciona las opciones de navegación esenciales mientras un usuario dado desplaza hacia abajo la página.

Un poco de uso de las transiciones CSS3 proporciona las sutiles animaciones que interconectan los dos puntos de vista del cabecero. Con un estilo responsive adicional, tendrá un encabezado fijo animado contemporáneo. A continuación se muestra el HTML, CSS y JavaScript necesarios.

Paso 1: encabezado-fijo-animado.html

Copia y pega el siguiente código en encabezado-fijo-animado.html

<header>
 <nav class="navbar navbar-default navbar-fixed-top">

<div class="navbar-header">
 <div class="container">
 <a class="navbar-brand" href="#">
 <img src="https://facilwebpro.com/wp-content/uploads/2017/04/logo.png" alt="Logo">
 </a>
 
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 
 </div>
 </div>
 
 <div id="navbar" class="navbar-collapse collapse navbar-right">
 <div class="container">
 <ul class="nav navbar-nav">
 <li><a href="#">Home</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#services">Services</a></li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 <ul class="social">
 <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
 <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
 <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
 </ul>
 </div>
 </div><!--/.nav-collapse -->


 </nav>
</header>

<div style="display: block; margin: 0 auto; text-align: center; height:800px;">

</div>

Paso 2 – encabezado-fijo-animado.css

Descarga el CSS a continuación e inclúyelo en tu página web:

encabezado-fijo-animado.css

Paso 3 – encabezado-fijo-animado.js

Copia y pega el siguiente código en encabezado-fijo-animado.js

$(window).scroll(function() {
 if ($(this).scrollTop() > 1){ 
 $('header').addClass("fijo");
 }
 else{
 $('header').removeClass("fijo");
 }
});

Paso 4: agregue los siguientes elementos a tu página web

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="encabezado-fijo-animado.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="encabezado-fijo-animado.js"></script>

Y listo. Para probar tu encabezado fijo animado, puedes ingresar en el siguiente enlace:

Enlaces de interés

Guía para instalar un servidor web local en tu mac OS – Stack de desarrollo –

Instalar WordPress en tu Mac de forma local

Fácil WebPro