I have been given a piece of jQuery that is meant to find the position of the users mouse, and the closer to the center the mouse is, the more it effects the opacity of elements on the page. The desired effect will be a fade as the mouse gets closer to the center, with a full screen logo fading to opacity: 0, the background going from black to white, and white text being revealed. Here is the code I have been given:
$('body').on('mousemove', function(e) {
var x_val = 2 *(e.pageX - $(window).scrollLeft()) / $(window).width() - 1,
y_val = 2 * (e.pageY - $(window).scrollTop()) / $(window).height() - 1,
opacity = (1 - Math.abs(x_val)) * (1 - Math.abs(y_val));
console.log(opacity)
});
Now, I am quite novice at jQuery, and any advice that you could give on how to have this code effect my css in the desired way would be massively appreciated!
Merry Christmas!
Aucun commentaire:
Enregistrer un commentaire