Besoin de conseils pour realiser une scrollmap / scroll heatmap

JapanFigs
Javascript

Bonjour,

Je dois developper une scrollmap / scroll heatmap.
Pour ce qui ne savent pas ce que c'est, voila un exemple:

Pour realiser ca, je vais me baser sur la propriete background gradient en CSS.
Je connais deja les coordonnees des points de la page les plus "vu" mais je ne vois pas comment creer mon background.

Par exemple, si ma page fait 1100px de haut et que j'ai les points ayant les coordonnees y suivante :

10, 5, 8, 20, 15, 25, 150, 170, 175, 160, 155, 162, 171, 500, 501, 499, 480, 490, 1000, 1010, 1005

Comment je dois faire pour determiner le background ?
En effet, je n'aurai pas toujours ce type de configuration:

      width: 100%;
      height: 1100px;

      background: #ff3232; /* Old browsers */
      background: -moz-linear-gradient(top,  #ff3232 0%, #fcf528 34%, #30ff3a 58%, #30fffb 82%, #3041ff 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  #ff3232 0%,#fcf528 34%,#30ff3a 58%,#30fffb 82%,#3041ff 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  #ff3232 0%,#fcf528 34%,#30ff3a 58%,#30fffb 82%,#3041ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#3041ff',GradientType=0 ); /* IE6-9 */

==> Ce CSS represente une zone chaude unique en haut de la page puis plus on descends plus la zone devient froide.
Il se peut qu'en haut on est une zone froide puis une zone chaude puis une zone froide a nouveau puis encore une zone chaude ...

(Je ne demande pas le code source, mais seulement de l'aide pour avoir des pistes de reflexions).

Merci

Aucune réponse