JavaScriptを使用した背景画像付き放射状カーソル

Question

背景画像を持つサイトに放射状のカーソルを作成しようとしています。

私は現在、2つの問題を抱えて：

1. それが現在のFirefoxとChromeで動作しますが、ありませんが。 「バックグラウンド」が発生したときに解析エラーが表示されます。 Chromeで
2. 、時には2つのカーソルが表示される代わりに1、私が現在hereから採用され、次のコードを使用しています。このJSFiddle

で見ることができる、ミラーリングされているようです。

どうすればこの問題を修正できますか？ありがとう！

。

CSS：

 html { 
     background: url("blocpartylandscape.jpg") no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

Javascriptを：

 $(function() { 

     var originalBGplaypen = $("html").css("background"), 
      x, y, xy, bgWebKit, bgMoz, 
      lightColor = "rgba(255,255,255,0.75)", 
      gradientSize = 100; 

     var originalBG = $('html').css("background"); 

      $('html') 
      .mousemove(function(e) { 

        x = e.pageX - this.offsetLeft; 
        y = e.pageY - this.offsetTop; 
        xy = x + " " + y; 

        bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG; 
        bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)"; 

        $(this) 
         .css({ background: bgWebKit }) 
         .css({ background: bgMoz }); 


      }).mouseleave(function() { 
       $(this).css({ background: originalBG }); 
      }); 

    }); 

Answer 1

Firefox用のものを簡単にするために、私は別のHTML要素を追加しました。要素はbodyのすべての周りのコンテナです。これは、html要素が永続的な背景イメージを持ち、競合する放射状のカーソルの背景（画像でもあります）によって妨げられないようにしました。 Chromeは背景画像と放射状カーソルの両方にhtml要素を共有しても問題ありませんでしたが、Firefoxはそうではありませんでした。

<div class="container"> 
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas in diam vitae elementum. </h1> 
</div> 

私は新しく追加されたコンテナを、ラジアルカーソルを表示するキャンバスとして使用しています。

.container { 
    height: 100vh;   
} 

JavaScriptでは、この新しいコンテナ要素を使用して放射状の背景を表示するだけです。

$(".container") 
    .css({ background: bgWebKit }) 
    .css({ background: bgMoz }); 

その後、ラジアルカーソルを削除します。

Firefoxには、バックグラウンドへの呼び出しが戻ってきたときの代わりに、rgbまたはrgbaの値が必要です。

bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, rgba(255,255,255,0.0) " + gradientSize + "px)"; 

あなたはもう少しをリファクタリングすることもできます。以下が有効ですが、この値は、放射状の背景に有効な引数ではありませんでした。私の主な目標は、あなたのために働くことを得ることでした。以下は、ChromeとFirefoxの両方で動作するデモです。

https://jsfiddle.net/7d17ufm7/