Imágenes de fondo de pantalla completa sin esfuerzo con jQuery

Hoy vamos a crear una página web simple y divertida con el único propósito de mostrar Fullscreenr, un pequeño gran complemento de jQuery que facilita agregar una imagen de fondo a su sitio que se ajusta automáticamente al tamaño de la ventana.

También lanzaremos algunas acciones de @ font-face y rgba para mantener las cosas modernas y educativas en el resto de la construcción. ¡Empecemos!

Manifestación

Solo para que pueda tener una idea de lo que estamos construyendo, vea la demostración a continuación. Para ver el jQuery en acción, cambie el tamaño de la ventana del navegador y observe cómo la imagen se adapta dinámicamente.

Ver la demo

Ahora que has visto cómo funciona, ¡vamos a construirlo!

Paso 1: Agarra Fullscreenr

Lo primero que querrás hacer es ir al sitio web de Fullsreenr y descargar una copia. Tome los archivos JS y colóquelos en una carpeta con un marco de sitio web básico: html, css e carpeta de imágenes.

Paso 2: Inicia el HTML

Para comenzar el HTML, introduzca el código para una página vacía y agregue las referencias para la hoja de estilo y los dos archivos JavaScript.

Diseño Shack + Fullscreenr

Paso 2: Seleccione una imagen de fondo

Antes de insertar el código para colocar nuestra imagen de fondo, necesitaremos saber el tamaño. Lo que por supuesto significa que tenemos que encontrar una imagen.

Tomé la imagen de abajo por Faisal.Saeed en Flickr Creative Commons. Es una increíble escena de montaña nevada que debe ser el escenario perfecto para nuestro sitio.

Luego, dimensioné la imagen para que fuera de 907px por 680px. Estas son las dimensiones que usaremos en nuestro próximo paso.

Paso 3: Inserte el Fragmento de Fullscreenr

En los archivos de demostración de la descarga de Fullscreenr, debe encontrar el siguiente fragmento de código JavaScript para habilitar el complemento. Lo he personalizado un poco con las dimensiones de la imagen especificadas anteriormente.

var FullscreenrOptions = {width: 907, height: 680, bgID: '#bgimg'}; jQuery.fn.fullscreenr (FullscreenrOptions);

Todo lo que tienes que hacer para tu propia versión es cambiar la altura y el ancho para que coincida con el de tu propia imagen.

Paso 4: HTML del cuerpo

A continuación, hay una parte de HTML en la página de demostración que deberás capturar. La estructura puede parecer un poco extravagante, pero en realidad todo lo que el desarrollador ha hecho es aplicar la imagen de fondo al cuerpo y crear un contenedor básico (realBody) para que luego agregue el resto de su contenido. Si no te gustan los nombres de ID div utilizados por el desarrollador, siéntete libre de cambiarlos a algo más convencional.

<img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_4.jpg"> <p>El complemento viene con una superposición de imagen de patrón de puntos, que se muestra a continuación en una vista ampliada. Si no te gusta este efecto, simplemente déjalo fuera!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_5.jpg"> <p>Si lo desea, puede detenerse aquí y continuar con su propio diseño. Si estás interesado en dónde ir desde aquí, terminaré con un diseño divertido. </p> <h2>Paso 6: Añadir una división de fondo y encabezado</h2> <p>Ahora que tenemos nuestra imagen de fondo, queremos centrar un div sobre la parte superior y darle un relleno de fondo. También le daremos un encabezado básico que me pareció apropiado dada la imagen de fondo nevada. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_6.jpg"> <h2>Paso 7: Agregar una imagen de encabezado</h2> <p>El siguiente paso es extremadamente fácil. Todo lo que tienes que hacer es tirar una imagen que tenga el mismo ancho que el contenedor (800px).</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_7.jpg"> <h2>Paso 8: Añadir un poco de texto</h2> <p>En este paso, agregaremos texto de relleno básico a la página y, a continuación, agregaremos una cuadrícula de imágenes. Dado que el texto se vinculará hipotéticamente con las imágenes, lo tiraremos todo en una? Cuadrícula? div.</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_8.jpg"> <h2>Paso 9: Añadir la Galería</h2> <p>Para finalizar la página, vamos a lanzar en una galería de imágenes simple que es básicamente una cuadrícula de nueve JPG. Para dar crédito a los fotógrafos, he vinculado cada una a las imágenes de origen originales en Flickr. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_9.jpg"> <h2>Conclusión</h2> <p>jQuery y el complemento Fullscreenr presentan la solución más fácil y con mejor aspecto que he encontrado para imágenes de fondo escalables. Si prefiere probar el mismo efecto con CSS, consulte los métodos de Chris Coyier en CSS-Tricks. Chris presenta tres alternativas posibles, la última de las cuales utiliza CSS puro y funciona mucho mejor que otros intentos de CSS que he visto. </p> <p>Como siempre, gracias por leer. Si te gustó el artículo, ¡danos un tweet, digg o cualquier otro grito social que puedas encontrar!</p>