Bienvenue dans La Boîte !
```
### CSS
Le CSS n'est pas extrêmement important dans le cadre de cet exemple ; il met en place l'élément et établit que les attributs {{cssxref("background-color")}} et {{cssxref("border")}} peuvent participer à des [transitions CSS](/fr/docs/Web/CSS/CSS_Transitions). Nous utiliserons ces transitions pour faire évoluer l'élément de telle sorte qu'il devienne plus ou moins obscur.
```css
#box {
background-color: rgba(40, 40, 190, 255);
border: 4px solid rgb(20, 20, 120);
transition: background-color 1s, border 1s;
width: 350px;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.vertical {
color: white;
font: 32px "Arial";
}
.extra {
width: 350px;
height: 350px;
margin-top: 10px;
border: 4px solid rgb(20, 20, 120);
text-align: center;
padding: 20px;
}
```
### JavaScript
Enfin, jetons un œil au code JavaScript qui utilise l'API _Intersection Observer_.
#### Préparation
Premièrement, nous devons préparer des variables et installer l'observateur.
```js
var numSteps = 20.0;
var boxElement;
var prevRatio = 0.0;
var increasingColor = "rgba(40, 40, 190, ratio)";
var decreasingColor = "rgba(190, 40, 40, ratio)";
// On met l'ensemble en place.
window.addEventListener("load", function(event) {
boxElement = document.querySelector("#box");
createObserver();
}, false);
```
Les constantes et variables que nous préparons sont :
- `numSteps`
- : Une constante qui indique combien de paliers nous voulons avoir entre les ratios de visibilité de 0.0 et de 1.0.
- `prevRatio`
- : Cette variable sera utilisée pour mémoriser quel était le ratio de visibilité la dernière fois qu'un palier a été franchi ; ce qui nous permettra de savoir si l'élément est en train de devenir plus ou moins visible.
- `increasingColor`
- : Une chaîne de caractères définissant une couleur que nous appliquerons à l'élément cible quand le ratio de visibilité augmente. Le mot "ratio" dans cette chaîne de caractères sera remplacé par la ratio de visibilité de la cible actuelle, de telle sorte que l'élément, en plus de changer de couleur, deviendra de plus en plus opaque à mesure qu'il deviendra obscur.
- `decreasingColor`
- : De même, il s'agit d'une chaîne de caractères qui définit une couleur que nous appliquerons lorsque le ratio de visibilité diminue.
On appelle {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} pour commencer à écouter l'évènement {{event("load")}} ; une fois que la page a finit de charger, on obtient une référence de l'élément avec l'identifiant `"box"` grâce à {{domxref("Document.querySelector", "querySelector()")}}, puis on appelle la méthode `createObserver()` que l'on va définir un peu plus tard pour gérer la création et l'installation de l'observateur d'intersection.
#### Création de l'observateur d'intersection
La méthode `createObserver()` est appelée une fois que le chargement de la page est terminé afin de gérer la création du nouveau {{domxref("IntersectionObserver")}} et de commencer le processus d'observation de l'élément cible.
```js
function createObserver() {
var observer;
var options = {
root: null,
rootMargin: "0px",
threshold: buildThresholdList()
};
observer = new IntersectionObserver(handleIntersect, options);
observer.observe(boxElement);
}
```
On commence par définir un objet `options` contenant les paramètres pour l'observateur. On voudra observer les évolutions de la visibilité de l'élément cible relativement au _viewport_, on initialise donc `root` avec `null`. Nous n'avons pas besoin de marge, donc l'espace de marge, `rootMargin`, est initialisé à `"0px"`. Ainsi, l'observateur surveillera les variations de l'intersection entre les frontières de l'élément cible et ceux du _viewport_, sans aucun espace ajouté ou ôté.
La liste de paliers de ratio de visibilité, `threshold`, est construite par la fonction `buildThresholdList()`. La liste de paliers est construite mécaniquement dans cet exemple car il y en a un certain nombre, et que ce nombre a vocation à être ajustable.
Une fois que `options` est prêt, nous pouvons créer le nouvel observateur, en appelant le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} , en précisant une fonction _callback_ à appeler quand l'intersection franchit l'un de nos paliers, `handleIntersect()`, et notre ensemble d'options. On appelle alors {{domxref("IntersectionObserver.observe", "observe()")}} sur l'observateur retourné, afin de le passer à l'élément qui sera notre cible
On pourrait également choisir de surveiller l'évolution de la visibilité de l'intersection de plusieurs éléments par rapport au _viewport_ en appelant `observer.observe()`pour chacun de ces éléments.
#### Construction du tableau de paliers de ratios
La fonction`buildThresholdList()`, qui construit la liste de paliers, ressemble à ceci :
```js
function buildThresholdList() {
var thresholds = [];
for (var i=1.0; i<=numSteps; i++) {
var ratio = i/numSteps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
```
Cela construit la tableau de paliers (chacun de ces paliers étant un ratio compris entre 0.0 et 1.0, ajouté en poussant la valeur`i/numSteps`dans le tableau `thresholds` pour chaque entier `i` entre 1 et `numSteps`). On pousse également 0 pour inclure cette valeur. Le résultat, dans le cas où`numSteps`a sa valeur par défaut, est la liste de paliers suivante :