Generar objetos que siguen al ratón

Categorias: , ,
Contenidos

Primer ejemplo

En este caso seguimos los pasos de un tutorial en el que explican como sustituilr el ratón por un objeto

https://www.youtube.com/watch?v=nZYAqoHbb0o

Primero he hecho el div del ratón, los divs de oxygen por defecto tiene un tamaño bastante grande que no me permiten reducir, para hacerlo les he cambiado el custom CSS, o eso me pedian en el vídeo, por desgracia esta función va un poco mal y hay en casos que se borran mis ordenes, así que las he tenido que poner en un CSS de un code block, visto esto, no recomiendo tocar el custom CSS de nada a traves de Oxygen.
pointer-events: none;
min-withd: 0px !important;
min-height: 0px !important;
 

Para hacer esto he programado esto en javascript:


function mouseFollow(e) {
if ( window.angular ) { return; };

var mouseX = e.pageX - 20;
var mouseY = e.pageY - 20;
var cursor = document.querySelector('.custom-cursor');

setTimeout( function() {
cursor.style.cssText = "transform:translate3D("+ mouseX +"px,"+ mouseY +"px,0);";
},1);
}

var x = document.getElementsByClassName("example1")[0];
x.style.display = "none";

function myFunction() {

if (x.style.display === "none") {
window.addEventListener('mousemove', mouseFollow);
x.style.display = "block";
} else {
x.style.display = "none";
window.removeEventListener('mousemove', mouseFollow);

}
}
magnifiercross