Poking Mangoes

It seem like half the world has gone Pokemon Go crazy. The rest of the world has just gone stupid.

In silly times like this I like to make daft things.  Mostly inspired by this

And it turns out lots of people are using the #pokemango hashtag.

I decided that Pokemango should be a real thing, because that's the sort of thing I do.  Remember I made Farting statues, this is the level I work at.

Pokemango logo

 

A few  technical details you might be interested in.

Its built in HTML/Javascript/CSS.

The animation of the mango is CSS. I was only going to have a single version of the animation but triggering the same animation twice in the two different CSS classes didn't seem to work. I might have a look at why that is, but having two separate animations is nicer anyway.

It could have been done in just CSS if it was intended only to work on desktop browsers and be triggered by mouse hover over the mango but it felt that to poke a mango needed a definite click and not just a hover. And i don't think that would have worked on mobile browsers any way.

Its a responsive web page so should work on both mobile and desktop browsers.

I haven't used any browser specific CSS prefixes. Its been tested on Chrome/Firefox/Safari on a mac and Chrome on a Android tablet. I haven't tested it on a iOS device because I don't have one. If it doesn't work on one of those happy to make any changes if needed. Its not tested on internet explorer because frankly i couldn't care less about that browser.

The Sentence 'Poke the mango, go on poke it'  is a web font.  I thought as though i was doing lots of other CSS I might as well throw that in there as well.

The code is up on github if that sort of thing interests you, of course its all in the web page so you can look at it on there as well.

Any way it can be found at pokemango.bringtherainbow.com have fun.

Comments are closed.