Git Product home page Git Product logo

pet-the-peepo's Introduction

Pet the Peepo

This project is complete.

Background

This little thing was as simple as a project can be, maybe it does not even qualify as one. Back then, the "Pet the X" meme was rather popular. One iteration of this meme, "Pet the Pop Cat" caught my eyes. The premise of the video is simple, you have a hand and a object, while the ending theme of "Super Mario: World" plays in the background. Then the hand goes in to pet the object. In response to the pet, the object jiggles, which is always endearing.

The whole point of Pet The Peepo was to do the same, but on a browser. I found a perfect loop for the background track, a still image of Pepe, and a gif of a hand petting Peepo. Putting these together was not at all difficult, essentially, there is an element in the middle of the website. When clicked or pressed, it would swap the static image of Pepe with a running the gif of a hand petting Peepo. It also triggers the background track to play. When the element is not longer pressed, it resets every thing back to the initial state. It swaps the gif back to the still image and stops the background track.

A note from ~2 years ago:

Remember PopCat and Pet the Pepe? What if we combine them together in to webpage.

Basically, the site has the PopCat. When the user left click, a hand will pet the cat. If they hold their left click, the hand will keep petting the cat. That’s it really.

The inner working is very simple.

When we click the we change the state of the image from static to a gif version. Once the user let go of the mouse we simply change the state back to static image.

Perfect Song Looped: https://www.youtube.com/watch?v=0zUvmEF20mg

pet-the-peepo's People

Contributors

eurydia avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.