TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear una página Parallax de ancho completo con Bootstrap?

7

Jumbotron es uno de los componentes de Bootstrap que ayuda a crear encabezados de página atractivos con un botón de llamada a la acción. El componente jumbotron predeterminado tiene un fondo de color gris claro y se puede crear con el ancho completo o encajar dentro de un contenedor. Con un ajuste menor de CSS, puede agregar una imagen de fondo de paralaje al componente jumbotron y crear un diseño de página de paralaje de ancho completo. En este artículo, analicemos más sobre cómo crear una página de paralaje de ancho completo con el componente jumbotron Bootstrap. Usamos la versión 4 de CSS, sin embargo, también puede usar la última versión.

¿Cómo crear una página Parallax de ancho completo con Bootstrap?

  • Página CSS Parallax
    1. Demostración de la página de paralaje de Bootstrap
    2. Comenzando con la plantilla de inicio
    3. CSS para efecto de paralaje
    4. HTML para secciones de paralaje
    5. Agregar navegación y pie de página
    6. Código completo para la página de paralaje
  • Página JavaScript Parallax

Página CSS Parallax

Primero, expliquemos la página de paralaje CSS con fondo fijo.

1 Demostración de la página Bootstrap Parallax usando Jumbotron

La sección de paralaje de la página de Bootstrap se verá más abajo.

¿Cómo crear una página Parallax de ancho completo con Bootstrap?

Bootstrap 4 Parallax Page con Jumbotron

2 Comenzando con la plantilla de inicio

El primer paso es comenzar con la plantilla básica de Bootstrap. Puede utilizar enlaces CDN para la hoja de estilo y los scripts o alojarlos en su propio servidor. Tomemos la siguiente plantilla de inicio con enlaces CDN como punto de partida para el diseño de nuestra página.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> Add Your Content Here... <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

3 CSS para efecto de paralaje

Nuestra sección de paralaje tiene una imagen de fondo con una altura mínima de 600px, un encabezado h1 y un párrafo para agregar una breve descripción.

Primero permítanos crear una sección de paralaje con una imagen de fondo fija, puede establecer la altura mínima a la altura deseada.

/* Header Parallax Element Style*/ .paral { min-height: 600px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; }

Luego, agreguemos algunos estilos al párrafo y al encabezado H1 como se muestra a continuación. Puede modificar los valores como desee.

/* Paragraph for Parallax Section */ .paral p { font-size: 24px; color:#f5f5f5; text-align: center; line-height: 60px; } /* Heading for Parallax Section */ .paral h1 { color: rgba(255, 255, 255, 0.8); font-size: 60px; text-align: center; padding-top: 60px; line-height: 100px; }

Luego agregamos una imagen para el fondo de la sección individual, hemos mostrado aquí tres clases de CSS para agregar tres secciones. Puede simplemente agregar ".paralsec3", ".paralsec4", etc. para agregar diferentes imágenes para secciones adicionales.

/* Image for Parallax Section */ .paralsec { background-image: url("https://img.webnots.com/2017/05/parallax.jpg"); } .paralsec1 { background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");} .paralsec2 { background-image: url("https://img.webnots.com/2015/11/parallax2.jpg"); } /* Add more images for more sections */

Finalmente, eliminemos el margen inferior del componente jumbotron predeterminado.

/* Remove Bottom Margin from Jumbotron */ .jumbotron{margin-bottom: 0;}

Puede agregar todas las etiquetas CSS dentro de … dentro de la sección de encabezado de la plantilla de inicio o crear una hoja de estilo y un enlace externos.

4 Creación de HTML para secciones de Parallax

A continuación se muestra el código HTML completo para la página de paralaje con tres secciones. Hemos utilizado el componente de botón predeterminado en cada sección.

<!-- First Parallax Section --> <div class="jumbotron paral paralsec"> <h1 class="display-3">Here is a heading 1</h1> <p class="lead">Here is a short description 1</p> <p class="lead"> <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a> </p> </div> <!-- Second Parallax Section --> <div class="jumbotron paral paralsec1"> <h1 class="display-3">Here is a heading 2</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a> </p> </div> <!-- Third Parallax Section --> <div class="jumbotron paral paralsec2"> <h1 class="display-3">Here is a heading 3</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a> </p> </div> <!-- Add More Parallax Sections Here -->

5 Agregar navegación y pie de página

Los bloques de código CSS y HTML anteriores con plantilla de inicio harán que la página de paralaje de ancho completo sin navegación ni pie de página. Agregue la barra de navegación usando el componente de la barra de navegación y el pie de página usando el CSS personalizado a continuación. La navegación y el pie de página completarán la página, que se puede usar en cualquier lugar de forma independiente.

/* Footer */ .wn-footer { padding: 2.5rem 0; text-align: center; color: white; background-color: #607D8B; border-top: .05rem solid #e5e5e5; } .wn-footer a { color: yellow; }

6 Página completa de Jumbotron Parallax

El código completo de la página de paralaje jumbotron Bootstrap 4 se verá a continuación. Puede copiarlo y usarlo reemplazando las URL de la imagen y el contenido ficticio por los suyos.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> /* Header Parallax Element Style*/ .paral { min-height: 600px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; } /* Paragrapgh for Parallax Section */ .paral p { font-size: 24px; color:#f5f5f5; text-align: center; line-height: 60px; } /* Heading for Parallax Section */ .paral h1 { color: rgba(255, 255, 255, 0.8); font-size: 60px; text-align: center; padding-top: 60px; line-height: 100px; } /* Image for Parallax Section */ .paralsec { background-image: url("https://img.webnots.com/2017/05/parallax.jpg"); } .paralsec1 { background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");} .paralsec2 { background-image: url("https://img.webnots.com/2015/11/parallax2.jpg"); } /* Add more images for more sections */ /* Remove Bottom Margin from Jumbotron */ .jumbotron{margin-bottom: 0;} /* Footer */ .wn-footer { padding: 2.5rem 0; text-align: center; color: white; background-color: #607D8B; border-top: .05rem solid #e5e5e5; } .wn-footer a { color: yellow; } </style> </head> <body> <!-- First Parallax Section --> <div class="jumbotron paral paralsec"> <h1 class="display-3">Here is a heading 1</h1> <p class="lead">Here is a short description 1</p> <p class="lead"> <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a> </p> </div> <!-- Second Parallax Section --> <div class="jumbotron paral paralsec1"> <h1 class="display-3">Here is a heading 2</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a> </p> </div> <!-- Third Parallax Section --> <div class="jumbotron paral paralsec2"> <h1 class="display-3">Here is a heading 3</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a> </p> </div> <!-- Add More Parallax Sections Here --> <!-- Footer Section --> <footer class="wn-footer"> <p>This is a Bootstrap 4 parallax page with jumbotron created by <a href="https://www.webnots.com/">WebNots Web Consulting Services</a></p> <p> <a href="#">Back to top</a> </p> </footer> <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> </body> </html>

Página JavaScript Parallax

Aunque la imagen fija CSS anterior parece una paralaje, no es realmente un efecto de paralaje. En paralaje, la imagen de fondo también debería moverse en relación con el movimiento del contenido. Solo se puede hacer usando JavaScript. Hay bibliotecas JavaScript listas para usar como jarallax.js que puede usar para crear secciones de paralaje de ancho completo. Desafortunadamente, explicar todo el proceso será más complejo aquí. Puede consultar las siguientes demostraciones y descargar temas creados con Bootstrap.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More