Cómo crear una página de aterrizaje animada con Bootstrap y Material Kit

Spanish (Español) translation by Carlos (you can also view the original English article)

En un tutorial pasado, analizamos cómo crear una página de aterrizaje responsiva con Bootstrap 4. Hoy, aprenderemos a crear una página de aterrizaje animada con Material Kit, un kit de interfaz de usuario (UI) gratuito de Bootstrap 4 y basado en Material Design de Google.

Para implementarlo, utilizaremos una combinación de las clases auxiliares de Bootstrap 4, las clases adicionales de Material Kit y de código personalizado cuando se requiera.

En lo que vamos a trabajar

Aquí está la página que crearemos durante este tutorial (observa la página completa para lograr el máximo efecto):

El concepto detrás de esta página es ofrecer un panorama rápido de Escocia. El contenido del texto es de Wikipedia, mientras que las imágenes son de Unsplash.

Nota: Este tutorial asume que tienes cierta familiaridad con Bootstrap 4. Si necesitas un repaso, consulta los siguientes tutoriales:

¿Qué es Material Kit?

Como ya se mencionó, Material Kit es un kit gratuito de interfaz de usuario (UI) de Bootstrap 4 inspirado en Material Design de Google.

«Material Design es un lenguaje de diseño que Google desarrolló en 2014. Extendiendo los patrones de las “tarjetas” que debutaron en Google Now, Material Design usa diseños basados en rejillas, animaciones, transiciones responsivas, rellenos y efectos de profundidad como iluminación y sombras».

Creado por Creative Tim, no solo personaliza la apariencia predeterminada de los componentes de Bootstrap 4, sino que también implementa sus propios estilos.

Además de la versión estándar gratuita, también existe una variante premium llamada Material Kit Pro con más funciones y capacidades. Afortunadamente, este kit de interfaz de usuario viene con una documentación bien organizada y tres páginas prediseñadas para acelerar el proceso de aprendizaje.

1. Incluye las bibliotecas necesarias de CSS y JS

Para los fines de este ejercicio, tendremos que descargar e incluir bastantes archivos en nuestro «pen».

Primero, importaremos los archivos requeridos de Material Kit siguiendo las instrucciones de esta página. Ten en cuenta que solo incluiremos los recursos que vamos a usar. Por ejemplo, nuestra página no contendrá un slider de rango, por lo que no es necesario incorporar noUISlider.

A continuación, importaremos AOS.js, una biblioteca fácil de utilizar que revelará nuestros elementos a medida que nos desplacemos por la página.

Considerando todo lo anterior, en el editor CSS de nuestro «pen» incluiremos tres archivos:

Del mismo modo, el editor de JavaScript contendrá cinco archivos:

The required JS files

2. Establece el marcado

Con todo el material necesario en su sitio, examinemos el marcado de la página.

Primero definiremos una cabecera (header), cinco secciones, un pie de página (footer) y un botón para volver al principio. Colocaremos las últimas cuatro secciones dentro del elemento main. Como veremos más adelante, este elemento de envoltura recibirá un margen superior negativo, por lo que su contenido se superpondrá a la parte inferior de la primera sección.

Nota: ya que estamos en el tema, quizá este tutorial sobre el colapso de los márgenes pueda ser interesante:

CSS

Fundamentos de CSS: entendiendo el colapso de los márgenes

Kingsley Silas Chijioke

Aquí está la estructura de la página:

<header>...</header>
<section>...</section>
<main>
  <section>...</section>
  <section>...</section>
  <section>...</section>
  <section>...</section>
</main>
<footer>...</footer>
<button>...</button>

3. Crea la cabecera (header)

La cabecera de la página se comportará como un elemento de posición fija e incluirá sólo un botón externo de llamada a la acción. Al principio, su fondo será transparente, pero después de 50px de desplazamiento se volverá blanco:

Aquí está su estructura:

<header class="navbar navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg" color-on-scroll="50">
  <div class="container">
    <a class="btn btn-rose btn-round" href="" role="button" target="_blank">
      <strong>...</strong>
      <i class="material-icons">flight</i>
    </a>
  </div>
</header>

Ten en cuenta que en una página real, dentro de la cabecera tendríamos una navbar (barra de navegación) con enlaces a las diferentes secciones.

4. Crea la sección hero

La sección hero (o «sección del banner») contendrá una imagen de fondo a pantalla completa y dos encabezados. Además, por razones de legibilidad, crearemos una imagen vacía superpuesta utilizando el pseudoelemento ::after:

Aquí está su estructura:

<section class="page-header text-center position-relative banner-section" style="background-image: url(scotland-unsplash.jpg);">
  <div class="container">
    <h1 class="title">...</h1>
    <h3>...</h3>
  </div>
</section>

Y los estilos para la superposición:

.banner-section::after {
  content: ’’;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.25);
}

.banner-section .container {
  z-index: 1;
}

5. Crea las secciones principales

Como lo comentamos anteriormente, el elemento main cubrirá la parte inferior de la sección hero:

Para lograr esta estructura, tenemos que añadirle las clases main y main-raised:

<main class="main main-raised">...</main>

Sección 1

La primera sección dentro de main contendrá un encabezado y dos párrafos:

The layout of the first section inside the main

El marcado de la sección:

<section class="section text-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-10">
        <h2 class="title mb-4">...</h2>
        <p>...</p>
        <p>...</p>
      </div>
    </div>
  </div>
</section>

Sección 2

En esta sección, usaremos pestañas para presentar algunos detalles de las ciudades más grandes de Escocia:

Aquí está el marcado:

<section class="section text-center">  
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-10">
        <h2 class="title mb-4">...</h2>
        <ul class="nav nav-pills nav-pills-rose justify-content-center mt-5" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="pills-edinburgh-tab" data-toggle="pill" href="#pills-edinburgh" role="tab" aria-controls="pills-edinburgh" aria-selected="true">Edinburgh</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="pills-glasgow-tab" data-toggle="pill" href="#pills-glasgow" role="tab" aria-controls="pills-glasgow" aria-selected="false">Glasgow</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="pills-aberdeen-tab" data-toggle="pill" href="#pills-aberdeen" role="tab" aria-controls="pills-aberdeen" aria-selected="false">Aberdeen</a>
          </li>
        </ul>
        <div class="tab-content tab-space pb-0">
          <div class="tab-pane active" id="pills-edinburgh" role="tabpanel" aria-labelledby="pills-edinburgh-tab">...</div>
          <div class="tab-pane" id="pills-glasgow" role="tabpanel" aria-labelledby="pills-glasgow-tab">...</div>
          <div class="tab-pane" id="pills-aberdeen" role="tabpanel" aria-labelledby="pills-aberdeen-tab">...</div>
        </div>
      </div>
    </div>
  </div>
</section>

Nota: Crearemos las pestañas siguiendo principalmente el marcado de Bootstrap en lugar de utilizar del todo el marcado de Material Kit. Creo que el ejemplo de Bootstrap es más completo y tiene más sentido con respecto a la accesibilidad.

Finalmente, especificaremos algunos estilos simples para agrandar los enlaces de las pestañas:

.nav-pills .nav-item:not(:last-child) {
  margin-right: 20px;
}

.nav-pills .nav-item .nav-link {
  font-size: 18px;
  padding: 10px 25px;
  text-transform: none;
}

Seccion 3

La tercera sección contendrá un encabezado y una rejilla de tarjetas similar a Masonry. Cada tarjeta tendrá una imagen junto con un título que formará parte de su superposición. Para hacer esto, vamos a aprovechar el diseño CSS de múltiples columnas.

En pantallas pequeñas (<576 px), todas las tarjetas se apilarán:

The layout of the third section inside the main on mobile devices

En pantallas más grandes, no obstante, tendremos un diseño de dos columnas:

The layout of the third section inside the main on small screens and above

Aquí está la estructura de la sección:

<section class="section text-center">
  <div class="container">
    <h2 class="title mb-4">...</h2>
    <div class="card-columns text-white">
      <div class="card bg-dark">
        <img class="card-img" src="IMG_SRC" alt="Card image">
        <div class="card-img-overlay d-flex flex-column align-items-center justify-content-center">
          <h4 class="card-title">...</h4>
          <p class="card-text mt-0">...</p>    
        </div>
      </div>
      
      <!-- more cards here -->
    </div>
  </div>
</section>

Los estilos que producirán este comportamiento:

.card-columns {
  column-count: 1;
  column-gap: 20px;
}

.card-columns .card {
  margin: 0 0 20px 0;
}

.card-columns h4 {
  font-size: 22px;
}

.card-img-overlay {
  background: rgba(0, 0, 0, 0.3);
}

@media (min-width: 576px) {
  .card-columns {
    column-count: 2;
  }
}

Sección 4

La cuarta sección incluirá un encabezado y un formulario.

De la misma manera que la sección anterior, en pantallas pequeñas (<576 px), todas las tarjetas se apilarán:

The layout of the fourth section inside the main on mobile devices

En pantallas más grandes, tendremos un diseño de dos columnas:

The layout of the fourth section inside the main on small screens and above

Aquí está la estructura de la sección:

<section class="section pb-5">
  <div class="container">
    <h2 class="title text-center mb-4">...</h2>
    <form>
      <div class="form-row">
        <div class="col-12 col-md-6 mb-4">
          <input type="text" class="form-control" placeholder="Full Name">
        </div>
        <div class="col col-md-6 mb-4">
          <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="col-12 mb-4">
          <textarea class="form-control" rows="5" placeholder="Message"></textarea>
        </div>
        <div class="col-12 mb-4">
          <div class="form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" value="">
              ...
              <span class="form-check-sign">
                <span class="check"></span>
              </span>
            </label>
          </div>
        </div>
        <div class="col-12 text-right">
          <button type="submit" class="btn btn-rose">Submit</button>
        </div>
      </div>
    </form>
  </div>
</section>

De forma predeterminada, Material Kit añade un color púrpura a la casilla de verificación. Además, los elementos del formulario reciben un borde púrpura inferior animado durante el estado de enfoque. En este punto, reemplazaremos ese color con el rosa común (rosa intenso) que se utiliza en toda la página.

Los estilos requeridos:

:root {
  --rose: #e91e63;
}

.form-control,
.is-focused .form-control {
  background-image: linear-gradient(0deg, var(--rose) 2px, rgba(156, 39, 176, 0) 0),
    linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
}

.form-check .form-check-input:checked + .form-check-sign .check {
  background: var(--rose);
}

6. Crea el botón de «Volver al inicio»

El botón de volver al inicio será un elemento de posición fija que al principio estará oculto:

Aquí está su estructura:

<button class="btn btn-rose btn-fab btn-fab-mini btn-round position-fixed back-to-top is-hidden">
  <i class="material-icons">keyboard_arrow_up</i>
</button>

Observa la clase is-hidden responsable de ocultarlo.

Los estilos del botón asociados:

.btn.back-to-top {
  bottom: 50px;
  right: 30px;
  z-index: 10;
  opacity: 0.5;
  transition: all 0.2s;
}

.btn.back-to-top.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.btn.back-to-top:hover {
  opacity: 1;
}

Tan pronto como un usuario se desplace al final de la página, aparecerá el botón. Si el usuario hace clic en él, volverá con suavidad a la parte superior de la página (al inicio).

El siguiente código JavaScript controla la funcionalidad anteriormente citada:

const $backTop = $(".back-to-top");
const isHidden = "is-hidden";

$(window).on("scroll", function() {
  const $this = $(this);
  if ($this.scrollTop() + $this.height() == $(document).height()) {
    $backTop.removeClass(isHidden);
  } else {
    $backTop.addClass(isHidden);
  }
});

$backTop.on("click", () => {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Ten en cuenta que la sección del pie de página no incluye nada especial, así que lo omitiremos por simplicidad. ¡Puedes comprobarlo por ti mismo!

¡Buen trabajo, amigos! Sin tanto esfuerzo, logramos crear una hermosa página de aterrizaje con Material Design.

Pero, seamos honestos, aún se puede mejorar, ¿verdad?

7. Anima los elementos durante el desplazamiento

¡Hasta este momento, nuestra página se ve muy bien! Pero, vayamos un paso más allá y demos vida a elementos específicos a medida que aparecen. Hay distintas maneras de lograrlo (por ejemplo, con plugins de JS, Intersection Observer API, etc.). De hecho, ya he cubierto ese requerimiento en tutoriales anteriores:

CSS

Crea un portafolio estático con un gráfico de barras avanzado con CSS

George Martsoukos

Para este ejemplo, vamos a usar AOS.js, una sencilla biblioteca de JavaScript que me gusta mucho.

Como primer paso, añadiremos el atributo personalizado data-aos a los elementos objetivo. El valor de este atributo puede recibir diferentes palabras clave como fade-up, fade-down y flip-left que indican el tipo de efecto. En nuestro caso, la mayoría de los elementos (aparte de los elementos masonry) aparecerán con una pequeña animación de diapositiva, por tanto, les daremos data-aos data-aos="fade-up"', de esta forma:

 <h2 class="title mb-4" data-aos="fade-up">...</h2>

Luego, inicializaremos el plugin y modificaremos algunas de sus opciones predeterminadas. Lo más importante, estableceremos once: true. Eso hará que las animaciones se activen solo una vez. De manera específica, al desplazarnos por la página por primera vez:

AOS.init({
  offset: 200, //default 120
  delay: 50, //default 0
  once: true //default false
});

Cabe señalar que también añadimos un segundo atributo personalizado (data-aos-delay) a los dos últimos enlaces de la pestaña (ciudades):

<li class="nav-item">
  <a class="nav-link active" data-aos="fade-up">...</a>
</li>
<li class="nav-item">
  <a class="nav-link" data-aos="fade-up" data-aos-delay="150">...</a>
</li>
<li class="nav-item">
<a class="nav-link" data-aos="fade-up" data-aos-delay="300">...</a>
</li>

El valor de este atributo anulará al que se pase dentro del objeto de configuración (delay: 50). Su trabajo es animar de manera secuencial la pestaña enlaces/ciudades. Por defecto, aparecerían todos a la vez porque tienen la misma posición vertical.

Finalmente, al navegar por las pestañas, la altura de la página cambiará. En tal caso, tenemos que informar al plugin sobre este cambio y dejar que recalcule las posiciones de los elementos objetivo. Por supuesto, este proceso solo tiene sentido cuando la opción once se ajusta a true y las animaciones ocurren todo el tiempo. De todas formas, si necesitas tal comportamiento, aquí está el código requerido:

$(’a[data-toggle="pill"]’).on("shown.bs.tab", e => {
  AOS.refresh();
});

Conclusión

¡Eso es todo, amigos! Gracias por seguirme, espero que el viaje haya valido la pena y que hayas adquirido nuevos conocimientos. Si alguna vez has creado alguna página con Material Kit, o cualquier otro framework de Material Design, no te olvides compartirlo con nosotros en los comentarios.

¿Cuál es tu framework favorito de Material Design?

Aquí tienes un recordatorio de lo que creamos:

Como una última reflexión, recuerda que la mejor forma de entender y quizá extender esta página es revisando el código mediante las herramientas de desarrollo. Se recomienda este mismo enfoque si decides profundizar en las páginas preconstruidas de Material Kit.

Como siempre, ¡muchas gracias por leernos!