Nyan Cat made with HTML5+CSS3+JavaScript

  • By Cristina Sturm
  • Last update: Nov 18, 2022
  • Comments: 3

Nyan Cat

DEMO HERE

Nyan Cat made with HTML5+CSS3 (and JavaScript :T).

Goals:

  1. My main goal with this project is to recreate the Nyan Cat we love using nothing but HTML and CSS3 (HTML5 audio for the background music).
  2. JavaScript is used with jQuery lib mainly to cycle element classes and to duplicate some stuff in order to cover the entire screen.
  3. Must be responsive.
  4. Must look exactly like the original Nyan Cat.

To Do List:

  • Fix rainow glitch on various resolutions
  • Add song (with loop)
  • Improve Performance
  • Anihilate jQuery
  • Find a way to verticaly replicate sparks without using JS
  • Remove JS Sparks Combos (repeat and left movement)
  • Remove JS Sparks
  • Remove JS Rainbow
  • Remove JS Nyan Cat
  • Add parallax effect to the sparks (this will be awesome! :D)

Credits:

Github

https://github.com/cristurm/nyan-cat

Comments(3)

  • 1

    Let the Browser choose the protocol to get the libraries

    This removes the force-use of HTTP to get jQuery from the CDN.

    Every reference to other resources should be made with "//" instead of hard-coding the protocol in it.

  • 2

    ⚡✨ Add parallax and remove js for sparks replication

    From your README, I saw you wanted to get rid of JS for sparks replication and add parallax.

    As I did a small test for my personal project based on your work, I added parallax and get rid of JS to replicate sparks using nth-child and flex box.

    The downside of this commit is that replication of sparks need to be done manually (i.e. it is needed to duplicate <div class="sparkle-moving">...</div> manually). But we can put more sparkle than needed to fill the page as sparkle animation are conditional to the nth-child. Then we just needed to add spark-moving:nth-chlid(N) for each <div class="sparkle-moving">...</div>.

  • 3

    K8s version

    I created https://github.com/Flowkap/nyan-k8s for a Kubernetes training session with some peeps (nyan cat is more fun than a Hello world nginx :D). Maybe you might wanna add it in some way.

    We could add the code to your repo under a folder k8s or just link mine. Just let me know if you're interested.

    Love the html nyan cat btw ;)