Radial Cursor mit Hintergrundbild mit JavaScript

Question

Ich versuche, einen radialen Cursor auf einer Website mit einem Hintergrundbild zu erstellen.

Im Moment habe ich zwei Probleme:

1. Es funktioniert derzeit mit Chrome, aber nicht mit Firefox. Ich erhalte einen Parsing-Fehler für "Hintergrund", wenn es auftritt.
2. auf Chrom, manchmal zwei Cursor angezeigt werden, anstelle von 1 und es erscheint gespiegelt werden, die in diesem Ich bin derzeit JSFiddle

gesehen werden kann, den folgenden Code aus here angenommen werden.

Wie würde ich das beheben? Vielen Dank!

.

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

Um Firefox die Dinge einfacher, fügte ich ein anderes HTML-Element. Das Element ist ein Container um alles in body. Ich tat dies, damit das html Element sein beständiges Hintergrundbild haben kann und nicht durch den konkurrierenden Radialcursorhintergrund gestört wird (der auch ein Bild ist). Chrome war in Ordnung, das Element html für das Hintergrundbild und den Radialcursor freizugeben, Firefox jedoch nicht.

Ich verwende den neu hinzugefügten Container als Canvas, auf dem der radiale Cursor angezeigt werden soll.

Nun verwende ich in Ihrem JavaScript einfach das neue Containerelement, um den radialen Hintergrund anzuzeigen.

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

Und dann zum Entfernen des radialen Cursors.

Firefox benötigt auch einen rgb oder rgba Wert anstelle dessen, was Ihr Aufruf zum Hintergrund zurück gab. Dieser Wert war kein gültiges Argument für den radialen Hintergrund, obwohl das folgende gilt:

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

Sie möchten vielleicht ein bisschen mehr Refactoring. Mein Hauptziel war es, Dinge für dich arbeiten zu lassen. Unten finden Sie eine Demo, die sowohl in Chrome als auch in Firefox funktioniert.

https://jsfiddle.net/7d17ufm7/