Dans ce didacticiel, nous examinons un bel effet de défilement de parallaxe de la manière la plus simple, avec des arrière-plans fixes et du contenu défilant.

Télécharger les fichiers source Voir la démo

Une brève introduction

La parallaxe est un effet où la position d'un objet semble être différente lorsqu'il est vu à partir de différentes positions. Le mouvement de parallaxe, ou dans notre cas, le défilement de parallaxe, nous donne alors l'illusion que deux objets dans la même ligne de visée, mais avec une distance entre eux, semblent se déplacer à des vitesses différentes. Si vous avez déjà regardé par la fenêtre d'une voiture alors que vous rouliez à 100 km/h sur une autoroute, vous remarquerez que les poteaux électriques semblent passer à toute allure, tandis que les montagnes en arrière-plan semblent se déplacer très lentement , presque à l'arrêt. C'est le mouvement de parallaxe en action.

En ce qui concerne le Web, nous pouvons induire un effet de parallaxe sur les conteneurs qui ont des images d'arrière-plan et du texte au-dessus d'eux. Dans sa forme la plus simple, le défilement parallaxe fera défiler le contenu normalement et l'arrière-plan restera immobile. La beauté de cette technique dans sa forme la plus simple est qu'elle ne nécessite que du CSS. Creusons.

Le balisage et la structure

Si vous aviez un site fixe avec qui ne répondait pas, il n'y aurait aucune astuce pour y parvenir. Nous sommes à l'ère de la conception Web réactive, donc c'est interdit. N'ayez pas peur ! Nous avons quelques bons CSS à notre disposition. Mais d'abord, un coup d'oeil à certains balisage. Le balisage est simple - nous aurons des sections sections contenu pour un effet maximal. Voici à quoi ça ressemble :

  

    
Serein
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Se lever
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Calmer
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  

Chaque section avec une classe de parallax contiendra nos images d'arrière-plan et le texte d'en-tête, tandis que chaque section avec une classe de content sera de simples sections contenant du contenu. La classe container est une div fluide avec une largeur maximale, ce qui rend la réactivité très simple. Maintenant, creusons dans le CSS.

Styliser et faire fonctionner avec CSS

Le premier point à noter est que toutes mes images d'arrière-plan ont une width de 1600px et une height de 600px. Cela me permet de régler mes sections de parallaxe sur une hauteur fixe de 600px. Il y a un peu plus que cela cependant. Parce que je ne veux pas répéter les arrière-plans (j'utilise des images grandes et en gras), je ne peux pas toujours m'attendre à ce que les utilisateurs soient à la largeur maximale (ce qui permettra aux images d'arrière-plan d'être en pleine vue). Heureusement pour nous, nous pouvons utiliser la propriété CSS background-size et la définir sur cover . Cela force l'image d'arrière-plan à occuper tout l'espace disponible en l'agrandissant proportionnellement. Il doit cependant être préfixé pour une prise en charge maximale, alors gardez cela à l'esprit.

Jusqu'ici tout va bien, sauf pour le plus important. Nous avons besoin que notre image d'arrière-plan reste fixe pendant que notre contenu défile. Encore une fois, CSS nous facilite la vie. Nous utilisons la propriété background-attachment et la définissons sur fixed . Simple! Voici à quoi ressemble mon CSS, avec quelques exemples de requêtes média :

 /* =============================================== ============
  STRUCTURE PRIMAIRE
================================================= ========== */
.récipient {
  largeur maximale : 960px ;
  marge : 0 automatique ;
}
/* =============================================== ============
  SECTIONS
================================================= ========== */
section.module:dernier-enfant {
  marge inférieure : 0 ;
}
section.module h2 {
  marge inférieure : 40px ;
  famille de polices : "Roboto Slab", serif ;
  taille de police : 30 px ;
}
section.module p {
  marge inférieure : 40px ;
  taille de police : 16 px ;
  poids de la police : 300 ;
}
section.module p:dernier-enfant {
  marge inférieure : 0 ;
}
section.module.contenu {
  rembourrage : 40px 0 ;
}
section.module.parallaxe {
  hauteur : 600px ;
  arrière-plan : 50 % 50 % ;
  répétition d'arrière-plan : pas de répétition ;
  pièce jointe en arrière-plan : fixe ;
  taille de fond : couverture ;
}
section.module.parallaxe h1 {
  couleur : RVB (255, 255, 255, 0,8) ;
  taille de police : 48px ;
  hauteur de ligne : 600px ;
  poids de la police : 700 ;
  aligner le texte : centrer ;
  transformation de texte : majuscule ;
  texte-ombre : 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallaxe-1 {
  image de fond : url("../img/demo/_small/1.jpg");
}
section.module.parallaxe-2 {
  image de fond : url("../img/demo/_small/2.jpg");
}
section.module.parallaxe-3 {
  image de fond : url("../img/demo/_small/3.jpg");
}

@media tout et (min-width : 600px) {
  section.module h2 {
    taille de police : 42px ;
  }
  section.module p {
    taille de police : 20 px ;
  }
  section.module.parallaxe h1 {
    taille de police : 96 px ;
  }
}
@media tout et (min-width : 960px) {
  section.module.parallaxe h1 {
    taille de police : 160px ;
  }
}

Prise en charge du navigateur et informations sur la propriété

Le support du navigateur en général est vraiment génial. IE8 et les versions antérieures ne prendront pas en charge la propriété background-size , mais un style conditionnel simple devrait s'en occuper. En dehors de cela, tout est pris en charge et vous ne devriez pas avoir de problèmes. Pour plus d'informations sur les propriétés CSS utilisées dans ce didacticiel, consultez le MDN :

• Position d'arrière -plan - référence MDN
• Taille d'arrière -plan – Référence MDN
• Pièce jointe d'arrière -plan - référence MDN

Emballer

Ici, nous avons implémenté quelque chose de simple, d'efficace et un peu différent du look ordinaire qui défile tout en même temps. Nous avons utilisé des techniques CSS intéressantes mais moins connues pour obtenir l'effet souhaité. Et c'est un enveloppement! N'oubliez pas que vous pouvez voir la démo et télécharger la source en cliquant sur les liens ci-dessous, et si vous avez des questions, des commentaires ou des commentaires, vous pouvez également les laisser ci-dessous.