Editeur en cloud et DOM

lire l'article

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é offsetTop: 3960

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.

Quizz

Selecteur !

Balise iframe

inspectez https://wherepathe.blogspot.com/ à la recherche de la balise <iframe>

Menu pur CSS

Outils pour le développement

Défi pour ce WE

Soit le HTML

<div class="conteneur" style="width: 400px; height: 400px;">
   <div id="it1">A</div>
   <div id="it2">B</div>
   <div id="it3">C</div>
   <div id="it4">D</div>
</div>

Imaginer le résultat du CSS suivant

.conteneur {
    display: grid;
    grid-template-columns: repeat(2, 100px);
 }

#it4 {
grid-column-end : 1
}