loading...

Playing with easter eggs: Ideas for making your website more fun

rose profile image Rose ・4 min read

I recently updated my personal site to feature a fun mode, where I tried to add as many easter eggs as I could think of.

I loved my early years making websites: The gaudy colours, using weird CSS properties that were not very user-friendly but tons of fun to mess around with (not gonna lie: I once had a website that set cursor: none on link hover, and it was very on-trend), and I wanted to re-create that.

Below I’ve outlined some of the things I added, along with a simple version of the code I wrote (the actual code has a few more bits and pieces) for any JavaScript beginners who may want to try something similar.

👆The obvious: Clicking something triggers an easter egg

This one is an easy easter egg to add and usually an easy one to find. I added a click listener on document.body that inserted a random emoji on the page whenever you clicked. I also included some seasonal variants (Halloween, Christmas) so that if you visited on special days, the emoji you saw would be suitable for that occasion.

It looks something like this:

var today = new Date();
// Regular days just use these emoji
var possibleEmoji = [
      '🐹',
      '🐢',
      '🌼',
      '🍉'
    ];

// Special emoji if close to Halloween
if (today.getMonth() === 9 && [31, 30, 29, 28].indexOf(today.getDate()) !== -1) {
  possibleEmoji = [
    '👻',
    '🎃',
    '🧟‍♀️'
  ];
}

// Special emoji if close to Christmas
if (today.getMonth() === 11 && [21, 22, 23, 24, 25, 26].indexOf(today.getDate()) !== -1) {
  possibleEmoji = [
    '❄️',
    '🎅',
    '🎁'
  ];
}

document.body.addEventListener('click', function (event) {
  /* 
   * generate random number that falls between 0 and the total number 
   * of emoji possibilities
  */
  var randomNumber = Math.round(Math.random() * possibleEmoji.length);

  var span = document.createElement('span'); 
  span.textContent = possibleEmoji[randomNumber];
  span.className= 'emoji click-emoji';
  /* 
   * event.clientX is where the mouse was horizontally at the time of 
   * the click. This way we can insert the emoji in the exact location 
   * the user clicked.
  */
  span.style.left = event.clientX + 'px';
  // event.clientY - same idea as clientX, but vertical position.
  span.style.top = event.clientY + 'px'; 
  /* Of course these values are useless if we don’t set the emoji's
   * position to something outside the normal flow of content. */
  span.style.position = 'fixed';
  document.body.appendChild(span);                           
});

⌨️ Still pretty basic but a bit harder: Keyboard events

I like this one but it has the major drawback of being on desktop browsers only. Still, I added a lot of little keyboard handler easter eggs - I won’t reveal them all in this post (where’s the fun in that?!) - But one is hitting the c key (in my mind, short for “clean up”) to make all those emoji that you inserted on the page animate away.

Here’s what it looks like -

document.addEventListener('keyup', function (event) {
  if (event.keyCode === 67) { // c
    // Find all emoji elements that we want to sweep away
    var clickEmoji = document.getElementsByClassName('click-emoji');
    var totalEmoji = clickEmoji.length;

    /* If you want to support older browsers you may want to 
     * polyfill forEach https://caniuse.com/#search=foreach
    */
    Array.from(clickEmoji).forEach(function (emoji, index) {
      /*
       * Change the animation delay to be random so that they fall off 
       * at different times, not all at once
      */
      var maximumDelay = totalEmoji.length > 10 ? 1000 : 400;
      if (index === 0) {
        emoji.style['animation-delay'] = 0 + 'ms';
      } else {
        emoji.style['animation-delay'] = Math.round(Math.random() * maximumDelay) + 'ms';
      }

      /* 
       * Make animation duration random as well for the same reason: 
       * Makes it more interesting if they fall at different speeds
       */
      emoji.style['animation-duration'] = Math.max(Math.round(Math.random() * 700), 100) + 'ms';

      // Once the emoji is done falling, we can remove it from the DOM
      emoji.addEventListener('animationend', function () {
        document.body.removeChild(emoji);
      });

      /*
       * The remainder of the animation logic is in CSS, triggered by 
       * the fall-down class
      */
      emoji.classList.add('fall-down');
  });
});

Clicks and keyboard events were fun to add but I felt like they were kind of old-hat so I was trying to think of other neat tricks.

🖍 Pretty hard-to-find: Selecting certain text on the page

After a bit of thinking I came up with this one, which I thought was pretty unique: An easter egg if you highlight a certain word on the page.

In this case: If you highlight my name on the page, a picture of me will appear.

I accomplished this like so:

var profileImage = document.createElement('img');
profileImage.setAttribute('src', './me-1.jpg');
profileImage.classList.add('profile-pic');

document.addEventListener('selectionchange', function() {
  var selection = document.getSelection();
  var selectedText = selection ? selection.toString() : null;

  // Warning for old browsers again: May want to polyfill https://caniuse.com/#search=includes
  if (['Rosemarie', 'Rosemarie Robertson', 'Rose'].includes(selectedText)) {
    // Add if you selected my name
    mainIntro.appendChild(profileImage);
  } else if (profileImage.parentNode) {
    // Remove if you de-selected it
    mainIntro.removeChild(profileImage);
  }
});

Any more ideas?

I still want to spend time building out fun things for people to find, so I’d love to hear suggestions! I’m always up for a challenge 😇

Discussion

pic
Editor guide
Collapse
hecmocerpro profile image
HéctorMorenoCervera

Nice ideas!!

A really cool feature nowadays is that thanks to the native javascript api you can get access to many hardware device features. For instance, some cool easter eggs could trigger by shacking, tilting, or through the light or proximity sensor 🤔😜

Collapse
messerli90 profile image
Michael Messerli

I never would have thought of some of these. Especially like the one triggered by highlighting your name!

I have one for a scavenger hunt app I'm working on. It's half Easter egg half cheat code, but if you tap the footer in the about page 5 times it unlocks the map with all the locations 😉

Collapse
tiepinl profile image
Tom Peperkamp

Thanks for the post and especially for the selecting certain text idea! I adjusted the js to change a modal div from "display: none;" to "display: block;" on text select, instead of inserting an img tag.

Collapse
tara profile image
Tara

This is so fun! I've always liked the idea of easter eggs because I think they're fun when I find them but, for some reason, have never actually put them into my personal projects. I must change this ASAP.

Collapse
pbouillon profile image
Pierre Bouillon

Ahah, definitly fun to browse, I love it ! What about the Konami Code ?
If you're curious, I added it in my personal website ! 😄

Collapse
santima10 profile image
Santiago M.A.

I love hidden easter eggs. I usually use tholman.com/elevator.js/ to add an elevator to the website

Collapse
itsasine profile image
ItsASine (Kayla)

I've done it before with combining KonamiJS

GitHub logo snaptortoise / konami-js

Add the Konami Code easter egg to your project. Compatible with gestures on smartphones and tablets as well.

Konami-JS

Add the Konami Code as an easter egg to your web project. Compatible with keyboard and touch events.

For examples and additional information please visit: snaptortoise.github.io/konami-js/

A joyful, frivolous project by George Mandis

Install

Future Improvements

Konami-JS is an ancient project by JavaScript standards, having started in 2009! I would love for 2019 to be the year it gets rewritten in a more modern way. Please checkout the issues and discussions surrounding the 2.0 branch.

I welcome the community's help in any of this 😃

Konami-JS in Action

Notable instances of Konami-JS in the wild include:

Watch

and ClippyJS

GitHub logo pi0 / clippyjs

Add Clippy or his friends to any website for instant nostalgia

Clippy

Add Clippy or his friends to any website for instant nostalgia This project is a fresh rewrite of Clippy.JS in ES6 (Read More)

Demos

Please be patient for first load. It may take some time as agents are loaded one by one.

image FOSSA Status

Usage

Browser

For using in raw HTML/JS:

<!-- Add the stylesheet to the head -->
<link rel="stylesheet" type="text/css" href="https://gitcdn.xyz/repo/pi0/clippyjs/master/assets/clippy.css"&gt
<!-- Add these scripts to  the bottom of the page -->
<script src="https://unpkg.com/jquery@3.2.1"></script>

<script src="https://unpkg.com/clippyjs@latest"></script>

<script type="text/javascript">
clippy.load('Merlin', function(agent){
    // Do anything with the loaded agent
    agent.show();
});
</script>

NPM /

so doing the Konami Code makes Clippy pop up to help you 😉

Collapse
rose profile image
Rose Author

oh my gosh so cute ❤️

Collapse
steeve profile image
Steeve

First, good article!
That's fun and not really common. To push further for Halloween, you should enable a dark mode 🎃

Collapse
rose profile image
Rose Author

Thank you! 😃 And I want to!! I have added some easter eggs that let you choose your "accent" colour (fun mode is pink by default, but you can toggle between orange, blue, green... if you can figure out how 😛) I definitely want to add a dark mode as well though, right now they are all light.

Collapse
mochagungh profile image
Moch Agung Hermawan

Wow that's really fun 😍

Collapse
iarmankhan profile image
Arman Khan

Great article! ❤❤

Collapse
ongy_tellez profile image
Lalo Téllez

Those are very nice ideas. I loved the emoji on-click and the cleanup for them. It certainly add some fun to your website.