Pages

l'objet window : en action

HTML


Créer un fichier HTML.

h1{ChapItre $$$}*200⇄ (tab)

L'extension Emmet doit être active.


Le code HTML obtenu, déclenche le scrool
<h1>Chaptre 001</h1>
<h1>Chaptre 002</h1>
<h1>Chaptre 003</h1>
...
<h1>Chaptre 199</h1>
<h1>Chaptre 200</h1>

Utilisez le scrool.

CSS

ajouter les propriétés suivantes : 

* {
  margin : 0;
  box-sizing: border-box;
}

h1 {
  height : 40px;
}

Inspection

Nous allons découvrir l'objet window.



Inspecter le chapitre 100 et rechercher la propriété offsetTop3960

Cette valeur correspond à 100-1*hauteur H1

DOC : The HTMLElement.offsetTop read-only property returns the distance of the
 current element relative to the top of the offsetParent node. 🌎

L'objet window.

Tapez dans la console
> window
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Rechercher la propriété pageYOffset

DOC : The corresponding pageXOffset property, which returns the number of pixels scrolled along the horizontal axis (left and right), is an alias for scrollX. 🌎


Remonter le scrool en haut de la page et donner la valeur de pageYOffset.

>window.pageYOffset
<0

Application


Compléter le code HTML en ajoutant un div

<div id="anim"></div>

<h1>chapitre 001</h1>

Donner le style suivant : 

#anim{
  position :fixed;
  text-align : right;
  border : 1px solid;
  z-index : -1;
  color : white;
  background-image: linear-gradient(to right, white, black);
}


Dans l'onglet JS de votre éditeur tapez le code.

function animMyScrool() {
    //let anim = document.querySelector("#anim");
    anim.innerText = parseInt(anim.style.width);
    anim.style.width = 
    `${window.pageYOffset/document.body.offsetHeight*document.body.offsetWidth}px`;
    window.requestAnimationFrame(animMyScrool);
}
window.requestAnimationFrame(animMyScrool);

window.requestAnimationFrame permet de relancer une fonction ici tick tout le temps. Cette fonction est utilisée dans les jeux d'animation.

Etudiez le coeur de la fonction animMyScrool.