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.
Thanks to awesome GIFLINKS & original source from Richard Denton !
All of the images were derived from GIPHY.
<script src="https://rawgit.com/WeiChiaChang/easter-eggs-mobile/master/scripts/easter-egg-mobile.js"></script>npm i easter-egg-mobile -DFor 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>This table can help you find out easter eggs as required :
A quick introduction of how to use easter-eggs-mobile, first of all :
git clone https://github.com/WeiChiaChang/easter-eggs-mobile.gitThen install pingy as front-end build tool :
Save your life, save your time
npm install @pingy/cli --globalLast step, install all of the modules :
npm installType this command with your favorite iterm2 :
pingy devEverything all done now!
Export website to a folder for distribution and ready for deploying :
pingy exportMIT © WeiChiaChang