Crea un mapa térmico de posición de desplazamiento usando JS y Canvas-ViewHeatmap. js
| Autor: | Mekajiki |
|---|---|
| Views Total: | 3,132 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 4, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
ViewHeatmap.js is a JavaScript library that generates a CANVAS based heat map on your webpage screenshot to visualize how far the visitors scroll down your page.
Funcionamiento
Incluya el script ViewHeatmap. js en el documento.
<script src="viewheatmap.js"></script>
Cree un elemento canvas de HTML5 para el mapa de calor.
<canvas id="target"></canvas>
Cree la altura de la pantalla y desplace los datos de posición para el mapa térmico utilizando la matriz de JavaScript.
var positionData = [
{
// The screen height of the visitor's device
height: 100,
//The scroll positions recorded periodically
positions: [ 0, 10, 15, 20, 25, 30, 35, 40 ]
}
,
{
height: 100,
positions: [ 25, 30, 35, 40, 45, 50, 55, 60 ]
}
,
{
height: 100,
positions: [ 225, 230, 235, 240, 245, 250, 255, 260 ]
}
]; Inicialice el mapa térmico con opciones.
new Heatmap(
// target canvas element
'target',
// webpage screenshot
'demo.png',
// scroll depth data
positionData,
{
// Alpha of screenshot. [0, 1]
screenshotAlpha: 0.6,
// Alpha of heatmap. [0, 1]
heatmapAlpha: 0.8,
//if 'simple' specified, render heatmap with simple transparent to red gradient.
colorScheme: 'simple'
}
);
