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

  • Individuel
  • En groupe de 4 (tarif réduit)

Matières abordées

  • HTML
  • CSS
  • Javascript
  • Création de site web
  • Bootstrap
  • Responsive Design

Niveaux

  • Terminale
  • BTS
  • Formation adulte
  • Débutant
  • Intermédiaire
  • Avancée

Contact

  • 06 21 66 33 38
  • tutovisuel@gmail.com

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

Afficher du contenu au scroll

Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire apparaître des éléments (images..) lorsque l’internaute découvre votre contenu en scollant vers le bas, comme montré ci-dessous.

Je vous invite à expérimenter cette effet. Commençons par le code HTML :

<main>
  <h1>Effet Scroll</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <figure>
    <img src="https://images.unsplash.com/photo-1485546246426-74dc88dec4d9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7f0bc29050a6d9a793469d897455f7da" alt="" width="50%" />  
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
</main>

Vous remarquez déjà la présence de la balise <figure> qui contient l’image . La technique consiste à faire défiler vers la gauche cette balise lorsque le curseur du scroll s’en approche.  En effet coté CSS, cette balise, par défaut, est cachée par la propriété opacity et positionnée (propriété position) vers la droite avec la propriété left.

figure{
  position: relative;
  left: 60%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition : all 1.5s ease;
}
body{
  overflow-x: hidden;
}

Voici enfin le code Javascript qui va orchestrer l’effet attendu. Pour éviter les conflits de nommage de variable avec les autres scripts existant, le code est placé dans une fonction anonyme.

(function() {
  
})();

Nous allons surveiller la position du scroll avec l’événement scroll puis changer le style de la balise <figure> (fig), lorsque le curseur du scroll (posCurseur) se trouve à moins de 300px de cette dernière (posImg).

(function() {
  var fig = document.querySelectorAll("figure")[0];
  var posImg = fig.offsetTop;
  function effet(){
    var posCurseur = this.pageYOffset;
    if(posImg-posCurseur<300){
      fig.style.left = 0;
      fig.style.opacity = 1;
    }else{
      fig.style.left = "160%";
      fig.style.opacity = 0;
    }
  }
  window.addEventListener("scroll", effet);
})();

Et voilà, c’est terminer! Simple non! Vous pouvez bien-sur personnaliser ce code pour l’adapter à votre graphisme..

Visualisez sur Codepen le résultat.

 

A lire aussi

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.