Images de fond plein écran sans effort avec jQuery

Aujourd'hui, nous allons créer une page Web simple et amusante dans le seul but de présenter Fullscreenr, un super petit plugin jQuery qui permet d'ajouter facilement une image d'arrière-plan à votre site, qui s'adapte automatiquement à la taille de la fenêtre.

Nous ajouterons également des actions @ font-face et rgba pour que les choses restent modernes et éducatives sur le reste de la construction. Commençons!

Démo

Pour que vous puissiez avoir une idée de ce que nous construisons, consultez la démo ci-dessous. Pour voir jQuery en action, redimensionnez la fenêtre du navigateur et observez l’adaptation dynamique de l’image.

Voir la démo

Maintenant que vous avez vu comment ça marche, construisons-le!

Étape 1: saisir le plein écran

La première chose à faire est d'aller sur le site Web Fullsreenr et d'en télécharger une copie. Prenez les fichiers JS et jetez-les dans un dossier avec un framework de base de site Web: html, css et dossier images.

Étape 2: Commencez le HTML

Pour commencer le code HTML, introduisez le code d'une page vide et ajoutez les références de la feuille de style et des deux fichiers JavaScript.

Design Shack + Plein écran

Étape 2: Sélectionnez une image de fond

Avant d'insérer le code pour placer notre image d'arrière-plan, nous devons connaître la taille. Ce qui bien sûr signifie que nous devons trouver une image.

J'ai saisi l'image ci-dessous par Faisal.Saeed sur Flickr Creative Commons. C'est une scène de montagne enneigée impressionnante qui devrait constituer le cadre idéal pour notre site.

Ensuite, j'ai dimensionné l'image pour qu'elle soit 907px par 680px. Ce sont les dimensions que nous utiliserons dans notre prochaine étape.

Étape 3: Insérez l'extrait Fullscreenr

Dans les fichiers de démonstration du téléchargement de Fullscreenr, vous devriez trouver l'extrait de code JavaScript suivant pour activer le plug-in. Je l'ai un peu personnalisé avec les dimensions de l'image spécifiées ci-dessus.

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

Tout ce que vous avez à faire pour votre propre version est de changer la hauteur et la largeur pour correspondre à celle de votre propre image.

Étape 4: Corps HTML

Ensuite, vous aurez besoin de récupérer un morceau de code HTML dans la page de démonstration. La structure peut sembler un peu funky, mais en réalité, tout ce que le développeur a fait est d’appliquer l’image d’arrière-plan au corps et de créer un conteneur de base (realBody) pour que vous puissiez ensuite ajouter tout le reste de votre contenu. Si vous n'aimez pas les noms d'identifiant de div utilisés par le développeur, n'hésitez pas à les changer pour quelque chose de plus conventionnel.

<img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_4.jpg"> <p>Le plug-in est livré avec une superposition d'images de motif en pointillé, illustrée ci-dessous dans une vue agrandie. Si vous n'aimez pas cet effet, laissez-le simplement de côté!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_5.jpg"> <p>Si vous le souhaitez, vous pouvez vous arrêter ici et procéder à votre propre conception. Si vous souhaitez savoir où aller à partir de maintenant, je terminerai avec un design amusant. </p> <h2>Étape 6: Ajouter une div de fond et un en-tête</h2> <p>Maintenant que nous avons notre image d’arrière-plan, nous souhaitons centrer une division par-dessus celle-ci et lui ajouter un fond. Nous allons également lui donner un en-tête de base qui, à mon avis, semblait approprié compte tenu de l’image de fond neigeuse. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_6.jpg"> <h2>Étape 7: Ajouter une image d'en-tête</h2> <p>La prochaine étape est extrêmement facile. Tout ce que vous avez à faire est d’ajouter une image de la même largeur que le conteneur (800 pixels).</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_7.jpg"> <h2>Étape 8: Ajouter du texte</h2> <p>Dans cette étape, nous allons ajouter du texte de remplissage de base à la page et dans la prochaine étape, nous ajouterons une grille d'images. Puisque le texte sera hypothétiquement lié aux images, nous le jetterons dans une "grille". div.</p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_8.jpg"> <h2>Étape 9: Ajouter la galerie</h2> <p>Pour terminer la page, nous allons ajouter une simple galerie d’images qui consiste en une simple grille de neuf fichiers JPG. Pour remercier les photographes, je les ai liés aux images sources originales sur Flickr. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/effortless-full-screen-background-images-with-jquery_9.jpg"> <h2>Conclusion</h2> <p>jQuery et le plugin Fullscreenr représentent la solution la plus simple et la plus esthétique que j'ai trouvée pour les images d'arrière-plan redimensionnables. Si vous préférez essayer le même effet avec CSS, découvrez les méthodes de Chris Coyier sur CSS-Tricks. Chris présente trois alternatives possibles, la dernière utilise du CSS pur et fonctionne beaucoup mieux que les autres tentatives de CSS que j'ai vues. </p> <p>Comme toujours, merci d'avoir lu. Si vous avez aimé l'article, envoyez-nous un tweet, un digg ou tout autre message social que vous pouvez imaginer!</p>