Layouts – Fond en Slider Plein Écran

LEÇON PRATIQUE

 

Caractéristiques

Un fond d'écran qui couvre toute la page et qui fait défiler des images d'un slider.

 

fond-en-slider-plein-ecran-screenshotFond en Slider - Plein Écran

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger

 

Comment ça marche ?

Le slider (dans cet exemple) est un Nivo Slider classique.

 

Dans le HTML, il y a deux "sections" (divs) principales :

  • la section pour le Slider, qui a la même largeur que la fenêtre du navigateur, et en position "fixed" pour ne pas manger le flux
  • la section du contenu, qui s'affiche par dessus la zone du Slider

 

Dans la section pour le Slider il y a 3 zones, imbriquées de façon hiérarchique :

  • le grand-parent (div id="slider-screenwidth-wrapper") : une zone qui a toujours la même largeur que la fenêtre du navigateur. Cette zone sert de vue taillée sur le slider : c'est à travers cette zone (et ses dimensions) qu'on voit le slider (ou seulement une partie). Comme cette zone ne déborde jamais sur les côtés, la barre de scroll gauche-droite n'est jamais activée par le slider, même s'il est plus large que la fenêtre.
  • le parent (div id="slider-imagewidth-wrapper") : une zone qui a toujours la même largeur que les images du slider. Elle peut déborder de la zone définie par son parent (slider-screenwidth-wrapper). Ainsi le slider n'est jamais redimensionné selon la largeur de la fenêtre et il peut couvrir verticalement toute sorte d'écran (ou au moins jusqu'à la taille verticale des images du slider)
  • l'enfant (div id="slider") : conteneur classique pour un slider de type Nivo Slider qui , par défaut, hérite sa largeur de son parent. C'est la div qui contient les images du slider.

 

Dans la section pour le contenu il y a 2 zones, imbriquées de façon hiérarchique :

  • le parent (div id="content-backdrop") sert à afficher un fond semi-transparent pour optimiser la lisibilité du texte, quelque soit l'image de fond
  • l'enfant (div id="content-wrapper") sert à styler le contenu, y compris l'espace entre le contenu et les bords du "content-backdrop"

 

Rôle du JavaScript / jQuery (pour les aspects Responsive Design) :

  • Régler la hauteur de la div "content-backdrop" pour qu'elle soit toujours au moins la même hauteur que la fenêtre du navigateur
  • Centrer les images du slider (centrer la div "slider-imagewidth-wrapper") : dans le cas où la fenêtre du navigateur est plus large que les images du slider les marges de la div "slider-imagewidth-wrapper" seront automatiques. Dans le cas contraire cette div aura une marge négative à gauche qui assure que la partie centrale des images du slider soit visible

 

HTML


        <div id="slider-screenwidth-wrapper">
            <div id="slider-imagewidth-wrapper">
                <div id="slider" class="nivoSlider">
                    <img src="image1.jpg"/>
                    <img src="image2.jpg"/>
                    <img src="image3.jpg"/>
                    <img src="image4.jpg"/>
                </div>
            </div>
        </div>

        <div id="content-backdrop">
            <div id="content-wrapper">

                ...

            </div>
        </div>

 

CSS


/* #slider-screenwidth-wrapper est une zone qui a toujours la même largeur que la fenêtre du navigateur. */
/* Cette zone sert de vue taillée sur le slider : c'est à travers cette zone (et ses dimensions) qu'on voit */
/* le slider ou, souvent, seulement une partie. Comme cette zone ne deborde jamais sur les côtés, la barre */
/* de scroll gauche-droite n'est jamais activée par le slider, même s'il est plus large que la fenêtre. */
#slider-screenwidth-wrapper
{
  width:100%;
  margin:0;
  padding:0;
  position:fixed;
  top:0;
  left:0;
  z-index:0;
}

/* #slider-imagewidth-wrapper est une zone qui a toujours la même largeur que les images du slider. */
/* Cette zone est l'enfant direct de #slider-screenwidth-wrapper et elle peut déborder de la zone */
/* définie par son parent. Ainsi le slider n'est jamais redimensionné selon la largeur de la fenêtre */
/* et il peut couvrir verticalement toute sorte d'écran - ou au moins jusqu'à la taille verticale des */
/* images du slider. */
#slider-imagewidth-wrapper
{
  width:1920px; /* obligatoirement la même largeur que les images du slider */
  margin:0;     /* la marge à gauche sera fixée par le javascript pour centrer le slider */
  padding:0;
}

/* Le fond noir semi-transparent. Sa hauteur sera fixée par le javascript. Sa position est relative */
/* uniquement pour qu'il soit un élément positionné, qui est crucial pour que la valeur z-index soit */
/* prise en compte et qu'il soit placé devant le slider. */
#content-backdrop
{
  position:relative;
  top:0;
  left:0;
  z-index:50;
  width:80%;
  margin:0 auto; /* le fond noir semi-transparent sera centré dans le slider */
  padding:0;
  background-color:rgba(0, 0, 0, 0.4);
}

/* Wrapper pour la zone de contenu. L'espace entre le contenu est le bord du fond noir semi-transparent */
/* doit être établi ici via le padding. */
#content-wrapper
{
  margin:0;
  padding:30px 10%;
  color:white;
}

 

JavaScript / jQuery


          /* setContentBackdropHeight() : fonction pour modifier la hauteur du content-backdrop (le fond noir */
          /* semi-transparent) pour qu elle soit toujours au moins la même hauteur que la fenêtre. */
          function setContentBackdropHeight() {
            var windowHeight = $(window).height();              /* hauteur de la fenêtre du navigateur */
            var contentHeight = $('#content-wrapper').height()
                     + parseInt($('#content-wrapper').css("padding-top"))
                     + parseInt($('#content-wrapper').css("padding-bottom")); /* hauteur du contenu de la page */
            if (contentHeight < windowHeight) {
              $('#content-backdrop').height(windowHeight); /* le contenu ne remplit pas l écran : grandir le fond */
            } else {
              $('#content-backdrop').height(contentHeight); /* le contenu remplit déjà l écran : minimiser le fond */
            }
          }

          /* setSliderMargin() : fonction pour centrer le slider via sa marge à gauche : dans le cas où la fenêtre */
          /* du navigateur est plus large que le slider les marges seront automatiques. Dans le cas contraire le slider */
          /* aura une marge négative à gauche qui assure que la partie centrale des images du slider soit visible. */
          function setSliderMargin()
          {
            var windowWidth = $(window).width(); /* largeur de la fenêtre du navigateur */
            var sliderWidth = $('#slider-imagewidth-wrapper').width(); /* largeur des images du slider */

            if (windowWidth >= sliderWidth) {
              $('#slider-imagewidth-wrapper').css("margin", '0 auto'); /* marges gauche/droite automatiques */
            } else {
              var offset = parseInt((sliderWidth - windowWidth) / 2.0);
              $('#slider-imagewidth-wrapper').css("margin", '0 0 0 -' + offset + 'px'); /* marge à gauche négative */
            }
          }

          function elementDimensioningAndPositioning() {
            setContentBackdropHeight();
            setSliderMargin();
          }

          $(window).load(function() {
            $('#slider').nivoSlider({ effect: 'fade',          /* paramètrage et mise en action du slider */
                                      animSpeed: 1800,
                                      pauseTime: 5000,
                                      directionNav: false,
                                      controlNav: false,
                                      pauseOnHover: false, });
            elementDimensioningAndPositioning();  /* initialiser les dimensions/position des éléments */
          });

          $(window).resize(function() {
            elementDimensioningAndPositioning();  /* adjuster les dimensions/position des éléments */
          });