Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <img class="icon" width="160" alt="easter-egg-collection" src="https://weichiachang.github.io/Easter-egg/images/easter-egg-collection-icon.png">
<p class="intro">Type keyword and something special will show up</p>
<div class="intro">
  <a target="_blank" href="https://github.com/WeiChiaChang/easter-egg-collection"><img src="https://img.shields.io/github/stars/WeiChiaChang/easter-egg-collection.svg?style=social&label=Star" alt="github stars">   </a>
  <a target="_blank" href="https://github.com/WeiChiaChang/easter-egg-collection" title="Follow @WeiChiaChang on GitHub"><img src="https://img.shields.io/github/followers/WeiChiaChang.svg?style=social&label=Follow" alt="GitHub followers">
</a>
</div>
<a target="_blank" href="https://github.com/WeiChiaChang/easter-egg-collection" class="github-corner" aria-label="View source on Github">
    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg>
  </a>

Easter Egg | Descrption
----------  | -----
hi | Set your goals high, and don't stop till you get there ๐Ÿ‘‹
wink | Wink and shut their apprehensions up ๐Ÿ˜œ
unicorn | I wish I were a unicorn, so I could stab idiots with my head ๐Ÿฆ„
kumamon | But people who really know me, know that I am not a bad boy at heart... I am a big teddy bear ๐Ÿป
haha | Behind every great man is a woman rolling her eyes โ˜บ๏ธ
travel | Wherever you go, go with all your heart ๐ŸŒ‡
bat | You gotta keep the ball off the fat part of the bat โšฐ
robot | We're fascinated with robots because they are reflections of ourselves ๐Ÿค–
hiphop | That's what hip-hop is: It's sociology and English put to a beat, you know ๐ŸŽถ
hippo | You Deserve A Hippo Today ๐Ÿ˜Ž
pokeball | Keep Calm And Go ๐Ÿš€
pie | So the pie isn't perfect? Cut it into wedges. Stay in control, and never panic ๐Ÿ•
ufo | From 1961 to 1965 Barney and I had not seen another UFO ๐Ÿ‘ฝ
walk | I am a slow walker, but I never walk back ๐Ÿšถ
cool | My key to dealing with stress is simple: just stay cool and stay focused ๐Ÿ˜Ž
balloon | What is success? It is a toy balloon among children armed with pins ๐ŸŽˆ
hangover | What in the world is a hangover cure? ๐Ÿท
kirby | "This grass feels funny," Kirby thought. "It feels like... pants." เผผ ใค โ—•_โ—• เผฝใค
no | No smoking ๐Ÿšฌ
onmyway | Stressed? Why not walk it off ๐Ÿšถ
haters | When there's so many haters and negative things, I really don't care ๐Ÿค”
board | Skate or die ๐Ÿ‘พ
snorlax | Just do it, later ๐Ÿ˜†
fly | I can't stop moving. I'm like this weird insect. I can't sit still in real life ๐Ÿ›
earth | Save earth to save life ๐ŸŒŽ
thankyou | You can do anything, but not everything ๐Ÿ™
swim | H2O = 2 parts heart, one part obsession ๐ŸŠ
penguin | Easy, breezy, beautiful penguin ๐Ÿง
handsome | I'm a handsome man with a charming personality ๐Ÿ˜Ž
winner | Without losers, where would the winners be? ๐Ÿ†
tank | If the tanks succeed, then victory follows โคต
jump | The only exercise I excel at is jumping to conclusions ๐Ÿ
fox | The fox changes his fur but not his habits ๐Ÿบ
mario | Life is a game, kid! It all depends on how you play! ๐ŸŽฎ
joker | I can't wait to show you my toys ๐Ÿƒ
rabbit | Maybe She's Born With It, Maybe It's Rabbit ๐Ÿ‡
sensei | wa ka ri ma shi ta ๐Ÿซ
piggy | Here comes wild boar knight ๐Ÿท
psyduck | Psyduck with Big Bang ๐Ÿ’ฃ
dragon | If you can't take the heat, don't tickle the dragon ๐Ÿฒ
salamander | Are salamanders dangerous to humans? ๐Ÿค”
airguitar | Just be like a guitar hero dude ๐ŸŽธ
pikachu | A pikachu will show up from the bottom with ligntning sound โšก
bravo | A man's clapping with funny smile ๐Ÿ‘
ghost | A ghost's floating from the right to the left ๐Ÿ‘ป
britney | A beauty called Britney will blink at you ๐Ÿ˜‰
pikarun | A lovely pikachu's running like a flash ๐Ÿ“ธ
catrun | I love cat, so let the cat out ๐Ÿ’•
koggy | No koggy, no happiness
sonic | Classic Super Sonic with vivid animation
doggy | Lovely doggy with vivid animation
spongebob | Spongebob is your best friend ๐Ÿ›€
gun | Where is your gun? ๐Ÿ”ซ
money | Pay money to my pain ๐Ÿ’ธ
homer | Wise man Homer ๐Ÿ 
dog | Dogs are human best friends ๐Ÿถ
bird | Stupid birds fly slowly ๐Ÿฆ
piqiu | A piqiu a day keeps worries away
lol | Haha, you're funny ๐Ÿ˜‚
ohhh | Mordecai & Rigby with OHHHHHHHHHHHHHH sound ๐Ÿ˜ฎ
nyancat | Nyan nyan nyan nyan nyan nyan nyan nyan ๐Ÿฑ

<div class="elevator">
                    <svg class="sweet-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
                        <path d="M70,47.5H30c-1.4,0-2.5,1.1-2.5,2.5v40c0,1.4,1.1,2.5,2.5,2.5h40c1.4,0,2.5-1.1,2.5-2.5V50C72.5,48.6,71.4,47.5,70,47.5z   M47.5,87.5h-5v-25h5V87.5z M57.5,87.5h-5v-25h5V87.5z M67.5,87.5h-5V60c0-1.4-1.1-2.5-2.5-2.5H40c-1.4,0-2.5,1.1-2.5,2.5v27.5h-5  v-35h35V87.5z"></path>
                        <path d="M50,42.5c1.4,0,2.5-1.1,2.5-2.5V16l5.7,5.7c0.5,0.5,1.1,0.7,1.8,0.7s1.3-0.2,1.8-0.7c1-1,1-2.6,0-3.5l-10-10  c-1-1-2.6-1-3.5,0l-10,10c-1,1-1,2.6,0,3.5c1,1,2.6,1,3.5,0l5.7-5.7v24C47.5,41.4,48.6,42.5,50,42.5z"></path>
                    </svg>
                    Back to Top
                </div>
              
            
!

CSS

              
                /* Markdown with CSS styling thanks to andyferra! */
/* The original source comes from here: */
/* https://gist.github.com/andyferra/2554919 */ 

body {
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; }

body > *:first-child {
  margin-top: 0 !important; }
body > *:last-child {
  margin-bottom: 0 !important; }

a {
  color: #4183C4; }
a.absent {
  color: #cc0000; }
a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;
  text-decoration: none; }

h1 tt, h1 code {
  font-size: inherit; }

h2 tt, h2 code {
  font-size: inherit; }

h3 tt, h3 code {
  font-size: inherit; }

h4 tt, h4 code {
  font-size: inherit; }

h5 tt, h5 code {
  font-size: inherit; }

h6 tt, h6 code {
  font-size: inherit; }

h1 {
  font-size: 28px;
  color: black; }

h2 {
  font-size: 24px;
  border-bottom: 1px solid #cccccc;
  color: black; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 16px; }

h5 {
  font-size: 14px; }

h6 {
  color: #777777;
  font-size: 14px; }

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 15px 0; }

hr {
  background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0; }

body > h2:first-child {
  margin-top: 0;
  padding-top: 0; }
body > h1:first-child {
  margin-top: 0;
  padding-top: 0; }
  body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
  margin-top: 0;
  padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0; }

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  margin-top: 0; }

li p.first {
  display: inline-block; }

ul, ol {
  padding-left: 30px; }

ul :first-child, ol :first-child {
  margin-top: 0; }

ul :last-child, ol :last-child {
  margin-bottom: 0; }

dl {
  padding: 0; }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px; }
    dl dt:first-child {
      padding: 0; }
    dl dt > :first-child {
      margin-top: 0; }
    dl dt > :last-child {
      margin-bottom: 0; }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px; }
    dl dd > :first-child {
      margin-top: 0; }
    dl dd > :last-child {
      margin-bottom: 0; }

blockquote {
  border-left: 4px solid #dddddd;
  padding: 0 15px;
  color: #777777; }
  blockquote > :first-child {
    margin-top: 0; }
  blockquote > :last-child {
    margin-bottom: 0; }

table {
  padding: 0; }
  table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }

img {
  max-width: 100%; }

span.frame {
  display: block;
  overflow: hidden; }
  span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto; }
  span.frame span img {
    display: block;
    float: left; }
  span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0; }
span.align-center {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center; }
  span.align-center span img {
    margin: 0 auto;
    text-align: center; }
span.align-right {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right; }
  span.align-right span img {
    margin: 0;
    text-align: right; }
span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left; }
  span.float-left span {
    margin: 13px 0 0; }
span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right; }
  span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right; }

code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px; }

pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent; }

.highlight pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }

pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }
  pre code, pre tt {
    background-color: transparent;
    border: none; }

/* github octocat icon */
/* Original source from here: */
/* https://github.com/tholman/github-corners */
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
  0%, 100% {
    transform: rotate(0)
  }
  20%, 60% {
    transform: rotate(-25deg)
  } 
  40%, 80% { 
    transform: rotate(10deg)
  }
}

@media (max-width:500px){
  .github-corner:hover .octo-arm {
    animation:none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}

/* Custom styling */
table {
  margin: 0 auto;
  font-size: 16px;
}

.intro {
  text-align: center;
}

p.intro {
  font-size: 40px;
  font-family: 'Amatic SC', cursive;
}

a {
  text-decoration: none;
}

.elevator {
  text-align: center;
  cursor: pointer;
  width: 140px;
  margin: auto;
  margin-top: 10%;
}

.elevator svg {
  width: 40px;
  height: 40px;
  display: block;
  margin: auto;
  margin-bottom: 5px;
}

body {
  /* images comes from:   */
  /* https://www.toptal.com/designers/subtlepatterns/page/7/ */
  background: silver url('https://weichiachang.github.io/Easter-egg/images/background-codepen.png') fixed;
}

.icon {
  display: block;
  margin: 0 auto;
}
              
            
!

JS

              
                // Original source from here:
// https://github.com/tholman/elevator.js
/*!
 * Elevator.js
 *
 * MIT licensed
 * Copyright (C) 2015 Tim Holman, http://tholman.com
 */

/*********************************************
 * Elevator.js
 *********************************************/

var Elevator = (function() {

    'use strict';

    // Elements
    var body = null;

    // Scroll vars
    var animation = null;
    var duration = null; // ms
    var customDuration = false;
    var startTime = null;
    var startPosition = null;
    var elevating = false;

    var mainAudio;
    var endAudio;

    /**
     * Utils
     */

    // Soft object augmentation
    function extend( target, source ) {
        for ( var key in source ) {
            if ( !( key in target ) ) {
                target[ key ] = source[ key ];
            }
        }
        return target;
    };

    // Thanks Mr Penner - http://robertpenner.com/easing/
    function easeInOutQuad( t, b, c, d ) {
        t /= d/2;
        if (t < 1) return c/2*t*t + b;
        t--;
        return -c/2 * (t*(t-2) - 1) + b;
    };

    function extendParameters(options, defaults){
        for(var option in defaults){
            var t = options[option] === undefined && typeof option !== "function";
            if(t){
                options[option] = defaults[option];
            }
        }
        return options;
    }

    /**
     * Main
     */

    // Time is passed through requestAnimationFrame, what a world!
    function animateLoop( time ) {
        if (!startTime) {
            startTime = time;
        }

        var timeSoFar = time - startTime;
        var easedPosition = easeInOutQuad(timeSoFar, startPosition, -startPosition, duration);                        
        
        window.scrollTo(0, easedPosition);

        if( timeSoFar < duration ) {
            animation = requestAnimationFrame(animateLoop);
        } else {
            animationFinished();
        }
   };

//            ELEVATE!
//              /
//         ____
//       .'    '=====<0
//       |======|
//       |======|
//       [IIIIII[\--()
//       |_______|
//       C O O O D
//      C O  O  O D
//     C  O  O  O  D
//     C__O__O__O__D
//    [_____________]
    function elevate() {

        if( elevating ) {
            return;
        }

        elevating = true;
        startPosition = (document.documentElement.scrollTop || body.scrollTop);
        
        // No custom duration set, so we travel at pixels per millisecond. (0.75px per ms)
        if( !customDuration ) {
            duration = (startPosition * 1.5);
        }

        requestAnimationFrame( animateLoop );

        // Start music!
        if( mainAudio ) {
            mainAudio.play();
        }
    }

    function resetPositions() {
        startTime = null;
        startPosition = null;
        elevating = false;
    }

    function animationFinished() {
        
        resetPositions();

        // Stop music!
        if( mainAudio ) {
            mainAudio.pause();
            mainAudio.currentTime = 0;
        }

        if( endAudio ) {
            endAudio.play();
        }
    }

    function onWindowBlur() {

        // If animating, go straight to the top. And play no more music.
        if( elevating ) {

            cancelAnimationFrame( animation );
            resetPositions();

            if( mainAudio ) {
                mainAudio.pause();
                mainAudio.currentTime = 0;
            }

            window.scrollTo(0, 0);
        }
    }

    //@TODO: Does this need tap bindings too?
    function bindElevateToElement( element ) {
        element.addEventListener('click', elevate, false);
    }

    function main( options ) {

        // Bind to element click event, if need be.
        body = document.body;

        var defaults = {
            duration: undefined,
            mainAudio: false,
            endAudio: false,
            preloadAudio: true,
            loopAudio: true,
        };

        options = extendParameters(options, defaults);
        
        if( options.element ) {
            bindElevateToElement( options.element );
        }

        if( options.duration ) {
            customDuration = true;
            duration = options.duration;
        }

        window.addEventListener('blur', onWindowBlur, false);

        // If the browser doesn't support audio, stop here!
        if ( !window.Audio ) {
            return;
        }

        if( options.mainAudio ) {
            mainAudio = new Audio( options.mainAudio );
            mainAudio.setAttribute( 'preload', options.preloadAudio ); 
            mainAudio.setAttribute( 'loop', options.loopAudio );
        }

        if( options.endAudio ) {
            endAudio = new Audio( options.endAudio );
            endAudio.setAttribute( 'preload', 'true' );
        }
    }

    return extend(main, {
        elevate: elevate
    });
})();


// trigger it

var elementButton = document.querySelector('.elevator');
var elevator = new Elevator({
  element: elementButton,
  // mainAudio from here:
  // https://github.com/tholman/elevator.js
  // Audio in the Demo (sourced from BenSound) is licenced under Creative Commons.
  mainAudio: 'https://weichiachang.github.io/Easter-egg/images/music/elevator.mp3',
  // endAudio from here:
  // https://www.findsounds.com/ISAPI/search.dll?keywords=ding+dinging
  endAudio:  'https://inventwithpython.com/pickup.wav'
});
              
            
!
999px

Console