Rose

Posted on Oct 16, 2019

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

#javascript #whimsical #webdev

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 😇

Top comments (14)

HéctorMorenoCervera • Oct 16 '19

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 🤔😜

Michael Messerli • Oct 16 '19

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 😉

Tom Peperkamp • Sep 8 '20

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.

Pierre Bouillon • Oct 18 '19 • Edited

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

Tara • Oct 16 '19

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.

Santiago M.A. • Oct 16 '19

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

ItsASine (Kayla) • Oct 16 '19

I've done it before with combining KonamiJS

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

Download the latest source and include konami.js in your project
Install with npm: npm install konami
Install with bower: bower install konami-js

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:

HuffPost
Tesla (Archive.org)
Newsweek
Marvel (Archive.org)
Almost half the sites in this Mashable article
Smashing Magazine
The History of Gaming Conventions
...and MANY more!

Watch

…

View on GitHub

and ClippyJS

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.

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 /

…

View on GitHub

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

Rose • Oct 16 '19

oh my gosh so cute ❤️

Lalo Téllez • Oct 16 '19

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

Arman Khan • Oct 16 '19 • Edited

Great article! ❤❤

Steeve • Oct 16 '19 • Edited

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

Rose • Oct 16 '19

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.