Formateur

Coder comme un PRO

Coder comme un PRO

Formateur Web depuis 11 ans dans la filière Webdesign, je vous propose de booster vos connaissances pour réaliser des sites web.

Cours par Webcam

Matières abordées

Niveaux

Contact

Vous êtes intéressez par la formation?
Contactez-moi.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ajouter un effet parallax sur vos pages

Voici un effet à la mode qui impressionne et que je vous invite à tester. Le principe consiste à fixer les images par rapport à l’écran même si l’internaute fais défiler la page. Les images peuvent aussi changer en fonction de la position du curseur du scroll.

Du coté HTML nous prévoyant autant de blocs de contenu (<div class="img1'><div> ..<div class="img1'><div>) que d’images :

<section>
  <h2>titre 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
</section>
<div class="img1"></div>
<section>
  <h2>Titre 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
</section>
<div class="img2"></div>
<section>
  <h2>Titre 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
</section>

Vous remarquez que chaque bloc est vide. En effet les images seront affichées via le CSS avec la propriété background-image.

h2{
  font-size: 2.5em;
  color: grey;
}
p{
  font-size: 2em;
  color: grey;
}
.img1,.img2{
  height: 200px;
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 center;
}
.img1{
  background-image: url(https://images.unsplash.com/photo-1488327361662-604ecddb43ae?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b3e645060c979f22f932b76e9df49401);
}
.img2{
  background-image: url(https://images.unsplash.com/photo-1504858800996-480c96c853b5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=78a6410fcc434b9aea46ce88ba07a049);
}

L’effet parallax s’obtient tout simplement en fixant l’arrière plan avec background-attachment: fixed, en le centrant avec background-position: 0 center et en dimensionnant l’image de fond pour qu’elle recouvre la taille de l’écran avec background-size: cover.



Et c’est tout! Bluffant non! Visualisez sur Codepen le résultat.

 

 

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »
tutowebdesign

Créer un menu latéral animé

Créer un menu latéral animé Idéal pour les formats mobiles, voici un menu latéral animé facile à faire dont l’ouverture est déclenchée par Javascript. Commençons

Lire »
MegaphoNews - Closer Than Ever

The leading news agency comes to your smartphone.  Download now.

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.