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é offsetTop: 3960
Cette valeur correspond à 100-1*hauteur H1
DOC : The
HTMLElement.offsetTop read-only property returns the distance of theL'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.