easter-egg-mobile

📱 easter-eggs-mobile

It's the special version which extended from easter-egg-collection this library for user to trigger lots of easter eggs on mobile device by 👆 clicking or tapping with ease.

🤘 Live Demo

• Just try it!
• Or... Codepen is your best friend!

💡 Inspiration

Original Source: Thanks to Richard Denton!

All of the images were derived from GIPHY.

🎉 Installing / Getting started

CDN 👇

<script src="https://rawgit.com/WeiChiaChang/easter-eggs-mobile/master/scripts/easter-egg-mobile.js"></script>

NPM 👇

npm i easter-egg-mobile -D

For Vue users, setup these commands in your single component file :

import easterEggMobile from 'easter-egg-mobile'

And don't forget trigger easter eggs when it mounted already :

export default {
  data () {
    return {
      ...
    }
  },
  // Trigger easter eggs when mounted
  mounted: function () {
    easterEggMobile
  }
}

Magic will show with a tiny setting on HTML, keep going ! 💪

Add class name and data-src attribute on <a> tags in your HTML structure, take ghost for example :

<a class="gif-ghost" data-src='./images/ghost.gif'>Ghost</a>

So if you want to use pikachu, that would be :

<a class="gif-pikachu" data-src='./images/pikachu.gif'>Pikachu</a>

The rest of easter eggs follow this way as well 🎉 , now enjoy it ! 🍾

This table can help you find out easter eggs as required :

🐰 easter egg class	📊 data-src	💯 original source
gif-pikachu	https://goo.gl/x3rX4r	https://i.giphy.com/uXnif9JVu6VnW.gif
gif-airguitar	https://goo.gl/qEhWwZ	https://i.giphy.com/7yfb0x166Coms.gif
gif-ghost	https://goo.gl/4EwYZr	https://i.giphy.com/YoypIsUmXXI52.gif
gif-dog	https://goo.gl/aQVAXH	https://i.giphy.com/4wLJ8aC0V68x2.gif
gif-hangover	https://goo.gl/aWj4U2	https://i.giphy.com/uDvz51Hu6PONi.gif
gif-winner	https://goo.gl/5vcgPj	https://i.giphy.com/3oKIPwZVHEiM2B3ljq.gif
gif-psyduck	https://goo.gl/UQL2ak	https://i.giphy.com/7gmk89ezqSjFS.gif
gif-salamander	https://goo.gl/6ZJv2q	https://i.giphy.com/Ny6WEYvBuBvDW.gif
gif-jump	https://goo.gl/EPJRmw	https://i.giphy.com/yqwAxqYAqKTmw.gif
gif-pokeball	https://goo.gl/TBGpoK	https://i.giphy.com/87XjvflDBlPMc.gif
gif-rabbit	https://goo.gl/an1sF1	https://i.giphy.com/ClZz9cJstGjuM.gif
gif-penguin	https://goo.gl/by1APG	https://i.giphy.com/12GEN4WSKIBYnC.gif
gif-jumpingbird	https://goo.gl/m1cdht	https://i.giphy.com/d3ywbrOKTC2283KM.gif
gif-haters	https://goo.gl/DuMKq4	https://i.giphy.com/L2ZFgodrsQs6s.gif
gif-dragon	https://goo.gl/P3hA5U	https://i.giphy.com/CJRIOrrkmtBOo.gif
gif-money	https://goo.gl/frKxMS	https://i.giphy.com/sBoohCuSRNYv6.gif
gif-robot	https://goo.gl/yV2gVM	https://i.giphy.com/7ER2Unn4hwhJ6.gif
gif-spongebob	https://goo.gl/CxR6Xq	https://i.giphy.com/FxAYkQqdw63hC.gif
gif-handsome	https://goo.gl/2Kz7Xf	https://i.giphy.com/aXPw3suOkxrBC.gif
gif-no	https://goo.gl/1Gx1dY	https://i.giphy.com/l1ibixfnM4qGI.gif

🤓 Developing

Setting up Dev

A quick introduction of how to use easter-eggs-mobile, first of all:

git clone https://github.com/WeiChiaChang/easter-eggs-mobile.git

Then install pingy as front-end build tool:

Save your life, save your time

npm install @pingy/cli --global

Last step, install all of the modules:

npm install

Type this command with your favorite iterm2:

pingy dev

Everything all done now!

Deploying / Publishing

Export website to a folder for distribution and ready for deploying:

pingy export

©️ License

MIT © WeiChiaChang