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.
Thanks
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: http://codiator.com/pixel-animation/?page_id=25
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.
Please check my previous reply.
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: http://pixxellsmedia.com/fx/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?
You can try handling ‘load’ event for the canvas element in jquery.panim-common.js or its counterpart, if you don’t use jQuery. Currently addEventListener starts animation on ‘mousemove’ event so you copy that block of code and use it for ‘load’ event as well.
kindly send me that ‘load’ block code or a complete .js file because I dont know how to insert that. thanks
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.
hello,,
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: http://codiator.com/pixel-animation/wp-content/uploads/2014/11/globe1.jpg
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: http://codiator.com/pixel-animation/?page_id=122
@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.
Hi, This is a standalone version and you only need to include a js file to start animating. There’s also a WordPress version available here
Thanks for the reply. @maxxscape The website the script is hosted on is using Wordpress.
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.
Excellent !
Thank you! 