CODEWITHSUNDEEP
jquerycssfiltermousemove
bjornfloki
bjornfloki

Reputation: 296

jQuery mousemove - applying CSS filter based on mouse position

I'm trying to set up a very simple mousemove event, which applies filter: (XXdeg) CSS to my background div based on mouse position. I've done this successfully in the past with background-color but it doesn't seem to be working for the filter property.

Here's what I have:

$(document).mousemove(function(e){
    var $width = ($(document).width())/255;
    var $height = ($(document).height())/255;
    var $pageX = parseInt(e.pageX / $width,10);
    var $pageY = parseInt(e.pageY / $height,10);
    $(".bg").css("filter", "hue-rotate(" + (255 - $pageX) + ")");
});

Would very much appreciate if someone could point out where I might be going wrong with this. Page with this code applied is here: http://www.joe-goddard.com

Thanks!

Upvotes: 2

Views: 516

Answers (2)

Luka Kvavilashvili
Luka Kvavilashvili

Reputation: 1389

I just tried that code, the only thing you're missing is the "deg" unit after the filter value.

var $document = $(document);

$document.mousemove(function(e) {
    var width = $document.width() / 255;
    var pageX = e.pageX / width;
    var value = 255 - pageX;

    $(".bg").css("filter", "hue-rotate(" + value + "deg)");
});

Upvotes: 3

roberrrt-s
roberrrt-s

Reputation: 8210

You have to specify what unit will be 255, in this case, deg (degree).

 $(".bg").css("filter", "hue-rotate(" + (255 - $pageX) + "deg)");

Working codepen example

Upvotes: 3

Related Questions