Taschenlampeneffekt: eine dunkle Seite mit der Taschenlampe erkunden
Der Taschenlampeneffekt macht auf einer Webseite das Licht aus und drückt dem Besucher eine Taschenlampe in die Hand. Sie wird tief in einer Ecke gehalten, wie in einem Spiel aus der Ich-Perspektive, dreht sich in echter Perspektive dorthin, wo der Zeiger hinwandert, und beleuchtet einen Spot mit weicher Kante und einem schwachen Lichthof darum. Ein Strahl zieht von der Linse durch die Luft, Staub treibt durch den Lichtkegel, und die Seite außerhalb des Lichts versinkt dunkel und unscharf. Die Seite darunter verändert sich nie: Links und Schaltflächen funktionieren auch im Dunkeln weiter.
So funktioniert es
Look wählen
Starte mit Nachtwanderung, Warme Lampe, Bühnenspot oder einem anderen Look und bewege den Zeiger über die Vorschau, um das Licht über die Seite zu lenken.
Licht formen
Wähle Hand und Taschenlampe (gefrästes Aluminium, klassisch schwarz oder flach gezeichnet), Größe und Kante des Spots, den Strahl, den Dunst und den Staub und wie dunkel und unscharf der Rest der Seite wird. Unter Gezeichnet mit wählst du WebGL, die leichtere, oder Three.js, echtes 3D-Modell.
Verwenden oder exportieren
Melde dich mit einem kostenlosen UX Pilot Konto an, um den Effekt in den UX Pilot Canvas zu setzen oder als HTML oder PNG zu exportieren.
Das kannst du damit gestalten
Hero im Dunkeln
Eröffne eine Launch-Seite oder einen Teaser im Dunkeln und lass Besucher die Überschrift mit der Taschenlampe finden.
Easter Eggs und versteckte Details
Versteck einen Code, einen Rabatt oder eine Nachricht, die nur dort erscheint, wo das Licht hinfällt.
Spiele, Mystery und Halloween
Schaffe Stimmung für ein Spiel, einen Escape Room, einen Podcast oder eine Halloween-Kampagne, mit einem Licht, das sich mit dem Besucher bewegt.
Ein Spot auf das Wesentliche
Nutze Bühnenspot ohne Hand, um ein einzelnes Feature, ein Produkt oder ein Porträt in einen Lichtkegel zu stellen.
Häufige Fragen
Was ist ein Taschenlampeneffekt?
Auf einer Website verdunkelt ein Taschenlampeneffekt die Seite und beleuchtet nur einen Kreis um den Zeiger, als würde der Besucher sie mit einer Taschenlampe erkunden. Der Taschenlampeneffekt ergänzt eine Taschenlampe in der Hand, die sich zum Licht dreht, einen Strahl durch die Luft, schwebenden Staub und Unschärfe außerhalb des Lichtkegels.
Verändert die Taschenlampe meine Seite?
Nein. Dunkelheit, Strahl und Hand werden über die Seite gezeichnet, die darunter bleibt, wie sie ist: Text lässt sich weiter markieren, und Links und Schaltflächen funktionieren weiter. Bei aktivierter reduzierter Bewegung öffnet die Seite dunkel mit eingeschaltetem Licht, und nichts bewegt sich von selbst.
Was ist der Unterschied zwischen WebGL und Three.js?
Beide zeichnen dasselbe Licht, denselben Staub und dieselbe Dunkelheit. WebGL ist die leichtere Variante und zeichnet die Taschenlampe in einem Shader. Three.js zeichnet sie als echtes 3D-Modell, mit Kühlrippen, einem gerändelten Griff und einem Clip, die das Licht einfangen, und braucht länger zum Laden. Wähle eins von beiden unter Gezeichnet mit.
Kann ich einen Taschenlampeneffekt ohne Code erstellen?
Ja. Stimme ihn in deinem Browser ab und melde dich dann mit einem kostenlosen UX Pilot Konto an, um ihn in den UX Pilot Canvas zu setzen oder als HTML oder PNG zu exportieren.