Crear cursores personalizados mediante JavaScript-CursorJS
| Autor: | renadmunna |
|---|---|
| Views Total: | 1,493 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 22, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
CursorJS es una biblioteca JavaScript súper pequeña para crear cursores personalizados renderizados con SVG.
Funcionamiento
Importe la biblioteca JavaScript de CursorJS en su proyecto Web.
<script src="cursor.min.js"></script>
Reemplace el icono de cursor predeterminado por su propia imagen:
<div style="display:none;">
<svg id="svg" width="14px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 20">
<polygon points="2,9 2,2 8,6" style="fill:#ffffff;stroke:#161616;stroke-width:1;"/>
<circle cx="9" cy="15" r="3" style="fill:#ffffff;stroke:#161616;stroke-width:1;"/>
</svg>
</div>
<script>
cursor({
domElement:document.body,
type:"svg",
svgElement:document.getElementById("svg")
});
</script> // or
cursor({
domElement:document.body,
type:"svg",
filePath:"type/cursor.svg"
});
// or
cursor_svg_string='<svg id="svg" width="14px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 20">'+
'<polygon points="2,9 2,2 8,6" style="fill:#ffffff;stroke:#161616;stroke-width:1;"/>'+
'<circle cx="9" cy="15" r="3" style="fill:#ffffff;stroke:#161616;stroke-width:1;"/>'+
'</svg>';
cursor({
domElement:document.body,
type:"svg",
svgString:cursor_svg_string
});
