Discussion on Pixel Animation HTML5

Discussion on Pixel Animation HTML5

Cart 61 sales

csgraduate supports this item


This author's response time can be up to 10 business days.

16 comments found.

Hi does this support PNG with transparency or SVG image types?

Hi, was this created in adobe animate? if so, would it be possible get the file? Since I am working on a project in adobe animate and would like to integrate this animation…. thanks from Berlin!

No, this is purely JavaScript.

Hi and congratulation for your project.

I want to ask you if I can use an image with 1800px width X 300px height.


It would be too slow.

This Pixel animation serves to put an ad on Ebay with just html5 code?

Not sure about eBay, if they allow it.

Good night: Where in the html code this script is copied

Please check the demo and its source.

How can I make the image not be pinned to x,y of 0,0? I want to center the image within the large canvas so that the particles have some room to bounce

You can create a image which is already centered by adding margin around it by using a photo editor.

How do I get it to show up on a black background???

Hi, Create an image with black background and use it for animation. You can check the logo in top left of this demo:

Is there a way to start the animation without the mouse over? For instance, I have a logo of ‘P’ as Pixxells, when I visit the page I want it from burst fx until it forms P.

thanks for the previous quick reply.

In responsive, how can I reduce the size of the “ravPanimArea” or its image, can you send me the CSS because I’m just a beginner.

here’s the sample:

I tried to reduce the div block but it doesn’t work. kindly check this?

.pm .ravPanimArea { float: right; width: 50%; height: 50%; }

disregard my previous message, I fixed it.

ravPanimArea {

float: right; width: 60%; height: 60%; }

is there a way to start the animation (burst) from the start without the mouse over?

Hi, Merely using the code in ‘load’ event won’t work as the pixels interacts with the mouse so it may not be possible easily.

Just kindly make a code to place the mouse cursor over the image on ‘load’ page?

I believe that this is something missing from the Javascript browser API.


we have purchased pixel animation html5 plugin , but this is not working on chrome.. issue is very urgent.. please help

Hi, Thank you for purchasing. Can you please pm me the url of the page in question.

It this a hosted application? How does it work and do we have any control over it? Do we just upload a file and we are given a code to place in our web page or post?

Yes, you just need to include a JavaScript file. There is a complete documentation inside the package.

Hi, is it possible to include a picture in your demo?

Thank you

Hi, Actually all those are pictures and this script disintegrates them into pixels for animation. For ex, this is the picture which is animated on the home page of the demo:

Thank you for your reply, I was meaning for a colorful picture like a building, nature, landscape etc.

You’re welcome. I’ve added one such image. Please check this:

@flexluther I didn’t see where it said anything about wordpress… Where did you see that ?

There’s also a WordPress version available here

Thanks but was not looking for the WP version… just thought from what flexluther said that I was missing something… I have it bookmarked and when I clean up this other project I am working on, I will be back to take a closer look…

Sounds great.

Looks great! Is this for Wordpress only? Can it be used on an bootstrap website? Thanks.

You’re welcome. And yes it is hosted on WordPress but animation is exactly the same for both of them.

Your script will animate ANY image? Thanks.

Yes, it will animate any image but smaller images are recommended. For bigger images, you can increase xspacing (horizontal spacing) and yspacing (vertical spacing) options

I just noticed that when it is open in another tab and the animation is still going, no matter how slightly, click another tab, wait a little bit, go back and those little pixels are going whacko… When you come back, it will eventually calm back down but it takes awhile…

Yes, they become unstable if the animation didn’t complete and you switched to a different tab so it grabs attention when you come back again.

any way you can stop that with something like Page Visibility ?

Actually it already has that feature. When you switch to a different tab/window, it doesn’t use any cpu at all as requestAnimationFrame api automatically pauses the animation when the page is not visible.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey