Licht nur in bestimmten Block soll funktionieren

[Rolf B]

Hallo horstmann,

folgende Empfehlungen:

(1) Allgemein

• deine .eins und .zwei divs möchten gerne header und footer heißen
• dein .canvas div möchte gern eine andere Klasse haben, weil man es sonst mit dem <canvas> Element verwechseln könnte. Vielleicht möchte es auch gleich ein <figure> Element werden
• dein mit Flexbox gemachtes Seitenlayout sollte auch mit flex-Eigenschaften gesteuert werden. Also z.B. flex: 0 0 9em für header und footer (feste Größe, 9em hoch) und der Bildcontainer bekommt flex: 1 0 1em;, also minimal 1em und er macht sich so hoch, dass die Seite voll wird.

(2) Searchlight

• mach das Searchlight zu einem Kind-Element der figure (also dein .canvas, falls Du Teil (1) übersprungen hast). Die figure benötigt dann position:relative.
• gibt der figure die overflow:hidden Eigenschaft, damit das Searchlight in der Figure bleibt
• mach das Searchlight rund mit border-radius
• ich wollte Dir schon box-shadow statt border vorschlagen, aber das erzeugt bei mir einen störenden Übergangsring. Schei...browser! Also doch border, du kannst das als border: max(120vh, 120vw) solid black; zusammenfassen (100 reicht nicht!)
• verwende transform:translate(-50%, -50%) auf dem Searchlight und positioniere es mit top und left, nicht über Margins. Auf diese Weise kannst Du mit top und left den gewünschten Mittelpunkt angeben und brauchst im JavaScript keine Informationen über die Größe des Searchlight
• Weil die figure nun das Elternelement des Searchlight ist, müssen die Koordinaten des Searchlights nun relativ zu dieser figure gesetzt werden.

Eine on/off Steuerung brauchst Du dann auch nicht mehr. Wenn das searchlight außerhalb der figure ist, ist das Bild komplett überdeckt. Dafür muss nur der Rahmen breit genug sein. Ich kann nur nicht beurteilen, ob das zu Performanceproblemen führt, wenn man per mousemove auf der ganzen Seite ein searchlight durch die Gegend schiebt, das einen riesigen Rahmen trägt. Eventuell muss man einen IntersectionObserver hinzufügen, der das searchlight abschaltet (und das Bild schwarz verdeckt), wenn es das Bild verlassen hat.

Guckst Du hier: https://jsfiddle.net/Rolf_b/4nqkazvw/

Deutlich kleiner, ohne jQuery 😀. Ggf. muss man noch das Scrolling des Body berücksichtigen. Wenn der nämlich höher als 100vh wird und man das Fenster (per Mausrad) scrollt, wandert das Searchlight mit und positioniert sich erst nach einer Mausbewegung wieder auf die Maus. Was logisch ist...

Ich weiß ja nicht, warum auf deiner Seite kein störender Übergangsrahmen zwischen Radialgradient und Border erscheint; in meinem Fiddle passiert das. Ich muss den Übergangspunkt im Radialgradienten auf genau 71% legen (also den Kehrwert von Wurzel 2, der Diagonalenlänge), damit er nicht auffällt. Mach ich ihn kleiner, ist da dieser feine Ring. Mach ich ihn größer, ist der Übergang zum Rand zu hart. Liegt vielleicht am iframe von jsFiddle, bei Dir ist es ja nicht so, wobei bei Dir auch auffällt, dass das Schwarz des Gradienten und das Schwarz des Randes unterschiedlich sind.

Rolf