DEV Community

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

Rose on October 16, 2019

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 ma...

Read full post

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.

Moch Agung Hermawan • Oct 16 '19 • Edited

Wow that's really fun 😍

Thomas Allison • Mar 1 '22

Wow, Thats a Great idea. I would love to use in my happyeasterguide.com