easter-egg-mobile v1.0.4

📱 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 :

🤓 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