jQuery mousemove - マウスの位置に基づいてCSSフィルタを適用する

Question

私はマウスの位置に基づいてフィルター：（XXdeg） CSSを適用する非常に単純なmousemoveイベントを設定しようとしています。私は過去にバックグラウンドカラーでこれを成功させましたが、filterプロパティでは機能していないようです。

は、ここで私が持っているものです。

$(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) + ")"); 
}); 

でしょう非常に多く、私はこれで間違っているかもしれないところに誰かが指摘することができれば感謝しています。このコードを適用したページは次のとおりです。http://www.joe-goddard.com

ありがとうございます！

Answer 1

私はちょうどあなたが不足している唯一のことは、フィルタ値の後に「度」単位で、そのコードを試してみました。

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)"); 
}); 

Answer 2

単位は255、この場合はdeg（度）と指定する必要があります。

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

Working codepen example