Gaijin.at

Easter Eggs in Websites

Contents

Easter eggs are hidden features, messages, or surprises built into software, websites, or digital media. They are often humorous or creative and intended to provide users with unexpected delight. On websites, Easter eggs can appear in the form of secret links, hidden animations, or special interactions accessible only through specific actions or inputs. These elements are usually undocumented and require a certain degree of curiosity from the user to discover them.

Types of Easter Eggs

The most common types of Easter eggs are listed here with some examples:

Easter Egg Locations

Easter eggs, or at least clues to them, are usually hidden in visible and easily accessible locations. However, since there are so many hiding places, they are not always easy to find.

Possible locations include:

Easter Egg Triggers

Some Easter eggs require a specific trigger to appear. These triggers can include:

Examples

All examples are also included in the downloadable easter-eggs-test.html file.

To keep things simple, the stylesheets and JavaScript functions are embedded directly in the HTML file.

Comments

The simplest form of an Easter egg or hidden hint is text in a comment in an HTML, CSS, or JavaScript file. This is easy to find when viewing the source code. Here are some examples:

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

        Easter Egg Test Page

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

HTML Attributes

Here there is a message in the alt attribute and a reference to it in the title attribute, which displays a tooltip when the mouse pointer is positioned over the small square image.

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">

Data attributes can also be used to place custom text in an HTML tag:

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

CSS Class

In the CSS class "secret" the content property contains an encoded URL:

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

The class does not need to be used in the HTML code. But a reference to the class could look like this:

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

Invisible Text

A CSS class hide the paragraph containing the Easter egg by default. When the page containing the "secret" fragment is accessed, the Easter egg is displayed.

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");
    }
});

Click with a key pressed

A message will be displayed here if the "Alt" key is held down while clicking the text.

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');
        }
    });
});

Console Output

The "console.log" function can be used to output text to the JavaScript console:

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

Action when switching tabs or minimizing

The following code displays a message when the tab is changed or the browser window is minimized.

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

Cookie / Local Storage

Cookies or data in Local Storage can also contain hints. The next line stores a message to local storage.

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

The message can be read (and deleted) using the developer tools.

Browser Offline Mode

If the browser has an offline mode, this can be checked with the following JavaScript code. Since not all web browsers have an offline mode, this method is also dependent on the browser used.

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

Multiple Clicks

If the small square image (see "HTML Attributes") is clicked five times, this JavaScript displays a message. The line containing "setTimeout..." ensures that the counter is reset after five seconds. The time can, of course, be adjusted, or the entire line can be removed to prevent a time limit.

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

This JavaScript code displays a message when the Konami code is entered on the keyboard (keys: Up - Up - Down - Down - Left - Right - Left - Right - 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');
    }
});

To change the key sequence, the key names must be entered into the "keysSequence" variable. If the key codes are unknown, they can be output using the (commented) line

console.log(event.key);

in the JavaScript console of the developer tools.

HTTP Header

Any HTTP headers can be set using a .htaccess file or server-side programming language, such as:

X-Easter-Egg: This is a secret message

The HTTP headers can be viewed using the developer tools.

All examples are also included in the downloadable easter-eggs-test.html file.

Were the free content on my website helpful for you?
Support the further free publication with a donation via PayPal.

Read more about support options...