Gaijin.at

Easter Eggs in Webseiten

Inhalt

Easter Eggs sind versteckte Funktionen, Nachrichten oder Überraschungen, die in Software, Webseiten oder digitalen Medien eingebaut sind. Sie sind oft humorvoll oder kreativ gestaltet und sollen den Nutzern eine unerwartete Freude bereiten. Auf Webseiten können Easter Eggs in Form von geheimen Links, versteckten Animationen oder speziellen Interaktionen auftreten, die nur durch bestimmte Aktionen oder Eingaben zugänglich sind. Diese Elemente sind meist nicht dokumentiert und erfordern vom Nutzer ein gewisses Maß an Neugier, um sie zu entdecken.

Arten von Easter Eggs

Die gebräuchlichsten Arten von Easter Eggs sind hier mit einigen Beispielen aufgelistet:

Fundstellen von Easter Eggs

Easter Eggs, oder zumindest Hinweise auf diese, sind üblicherweise an sichtbaren und frei zugänglichen Orten versteckt. Da es sehr viele Versteckmöglichkeiten gibt, sind sie aber nicht immer einfach zu finden.

Mögliche Orte sind zum Beispiel:

Auslöser für Easter Eggs

Einige Easter Eggs benötigen einen bestimmten Auslöser, um angezeigt zu werden. Solche Auslöser können sein:

Beispiele

Alle Beispiele sind auch in der herunterladbaren HTML-Datei easter-eggs-test.html enthalten.

Um es einfacher zu halten, sind die Stylesheets und JavaScript-Funktionen direkt in der HTML-Datei eingebettet.

Kommentare

Die einfachste Form für ein Easter Egg oder einen versteckten Hinweis ist ein Text in einem Kommentar einer HTML-, CSS- oder JavaScript-Datei. Beim Betrachten des Quelltextes ist dieser einfach zu finden. Hier einige Beispiele:

HTML:
<!-- This is a secret message -->
Stylesheet / JavaScript:
/*
     (\(\
     (-.-)
     (")(")
*/
HTML:
<!--
   _____       _ _ _              _   
  / ____|     (_|_|_)            | |  
 | |  __  __ _ _ _ _ _ __    __ _| |_ 
 | | |_ |/ _` | | | | '_ \  / _` | __|
 | |__| | (_| | | | | | | || (_| | |_ 
  \_____|\__,_|_| |_|_| |_(_)__,_|\__|
               _/ |                   
              |__/                    

        Easter Egg Test Page

       https://www.gaijin.at/
-->

HTML-Attribute

Hier steht im alt-Attribut eine Nachricht und ein Hinweis darauf im title-Attribut, welches ein Tooltip anzeigt, wenn der Mauszeiger über dem kleinen quadratischen Bild positioniert wird.

HTML:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAaElEQVR4AcXBQQ2EUBTAwG4DCQkOuCIBERjH118L79aZ3/u+i4Hrupg4joMJiUhEIhKRiEQkIhGJbPd9M7HWYmLfdyYkIhGJSEQiEpGIRCSyfd/HxPM8TJznyYREJCIRiUhEIhKRiET+ndMI9Tt+tD0AAAAASUVORK5CYII=" id="image" alt="This is a secret message" title="Hint: Inspect the element">

Mit data-Attributen kann ebenfalls ein benutzerdefinierter Text in einem HTML-Tag verwendet werden:

HTML:
<p data-secret="This is a secret message">This is a normal text.</p>

CSS-Klasse

In der CSS-Klasse "secret" ist in der content-Eigenschaft eine kodierte URL enthalten:

Stylesheet:
.secret {
    content: 'https%3A%2F%2Fwww%2Egaijin%2Eat%2F';
}

Die Klasse muss nicht im HTML-Code verwendet werden. Ein Hinweis auf die Klasse könne so aussehen:

HTML:
<p>I am a <span class="secret">hint</span>.</p>

Nicht sichtbarer Text

Eine CSS-Klasse blendet den Absatz mit dem Easter Egg standardmäßig aus. Wird die Seite mit dem Fragment "secret" aufgerufen, wird das Easter Egg eingeblendet.

Stylesheet:
.normal-mode { display: none; }
.easter-mode { display: block; }
HTML:
<p id="frag" class="normal-mode">The page was loaded with the fragment "#secret".</p>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
    if (location.hash === "#secret") {
        document.getElementById('frag').classList.add("easter-mode");
    }
});

Klick mit gedrückter Taste

Hier wird eine Meldung angezeigt, wenn beim Klicken des Textes die Taste "Alt" gedrückt gehalten wird.

HTML:
<p id="clickme">Click me while pressing the Alt/Option key</p>
JavaScript:
document.addEventListener('DOMContentLoaded', function(event) {
    document.getElementById('clickme').addEventListener('click', function(event) {
        if (event.altKey) {
            alert('This is a secret message');
        }
    });
});

Ausgabe in der Konsole

Mit der Funktion "console.log" können Texte in die JavaScript-Konsole ausgegeben werden:

JavaScript:
if (window.console) {
    console.log("This is a secret message");
}

Aktion beim Tab-Wechsel oder Minimieren

Der folgende Code zeigt eine Meldung an, wenn der Tab gewechselt oder das Browserfenster minimiert wird.

JavaScript:
document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        console.log("This is a secret message - Goodbye");
    }
});

Cookie / Local Storage

Cookies oder Daten im Local Storage können auch Hinweise enthalten. Die nächste Zeile speichert eine Nachricht in den Local Storage.

JavaScript:
localStorage.setItem("secret", "This is a secret message");

Über die Developer-Tools kann die Nachricht gelesen (und auch gelöscht) werden.

Offline-Modus des Browsers

Wenn der Browser über einen Offline-Modus verfügt, kann dies mit dem folgenden JavaScript-Code geprüft werden. Da nicht alle Webbrowser einen Offline-Modus haben, ist diese Methode auch an den verwendeten Browser gebunden.

JavaScript:
if (!navigator.onLine) {
    alert("Offline mode: This is a secret message");
}

Mehrfache Klicks

Wird das kleine quadratische Bild (s.h. "HTML-Attribute") 5-mal angeklickt, zeigt dieses JavaScript eine Meldung an. Die Zeile mit "setTimeout..." sorgt dafür, dass der Zähler nach fünf Sekunden zurückgesetzt wird. Die Zeit kann natürlich angepasst, oder die ganze Zeile entfernt werden, um kein Zeitlimit zu vergeben.

JavaScript:
document.addEventListener('DOMContentLoaded', function(event) {
    let clicks = 0;
    const element = document.getElementById("image");
    element.addEventListener("click", () => {
        clicks++;
        if (clicks >= 5) alert('This is a secret message');
        setTimeout(() => clicks = 0, 5000); // reset after 5 seconds
    });
});

Konami-Code

Dieser JavaScript-Code zeigt eine Meldung an, wenn der Konami-Code auf der Tastatur eingegeben wurde (Tasten: Auf - Auf - Ab - Ab - Links - Rechts - Links - Rechts - B - A).

JavaScript:
const keysSequence = 'ArrowUp ArrowUp ArrowDown ArrowDown ArrowLeft ArrowRight ArrowLeft ArrowRight b a';

const keysSequenceLength = keysSequence.split(' ').length;
const keysPressed = [];

document.addEventListener('keyup', function(event) {
    // console.log(event.key);
    keysPressed.push(event.key);
    keysPressed.splice(0, keysPressed.length - keysSequenceLength);
    if (keysPressed.length != keysSequenceLength) return;
    if (keysPressed.join(' ').includes(keysSequence)) {
        alert('This is a secret message');
    }
});

Um die Tastensequenz zu ändern, müssen die Namen der Tasten in die Variable "keysSequence" eingetragen werden. Wenn die Tastencodes nicht bekannt sind, können diese mit der (auskommentierten) Zeile

console.log(event.key);

in der JavaScript-Konsole der Developer-Tools ausgegeben werden.

HTTP-Header

Per .htaccess-Datei oder serverseitiger Programmiersprache können beliebige HTTP-Header gesetzt werden, wie zum Beispiel:

X-Easter-Egg: This is a secret message

Die HTTP-Header können mit den Developer-Tools eingesehen werden.

Alle Beispiele sind auch in der herunterladbaren HTML-Datei easter-eggs-test.html enthalten.

Waren die kostenlosen Inhalte auf meiner Webseite hilfreich für dich?
Unterstütze die weitere kostenlose Veröffentlichung mit einer Spende per PayPal.

Lese mehr über Unterstützungs­möglichkeiten...