Discussion on intAnim - Interactive Animated Background

tips4design

tips4design supports this item

Supported

This author's response time can be up to 1 business day.

17 comments found.

Your live preview doesn’t work! Interested to see it live as I will probably buy it.

Thanks, will check that out. Note that in the live preview a single style is shown and no generator is available. What browser/ OS are you using?

What version of Firefox are you using? For me it works fine on Firefox 18.0.1 and 18.0.2 .

very nice file. Wish you a lot of sales.. :)

Thanks, you too :).

Cool. Please check out preview on iPad . Does not respond well to chages

Yes, I noticed that there is a problem with fixed positioning on mobile devices, fixing that.

Updated the live preview. It should be good now. Also I suggest trying the parallax demo on a tablet :)

Can I keep my background design, setting your backgound color as “transparent” and use only the shape effect?

It will be possible in the next version which will be out tomorrow, update which includes bug fixes, performance improvements, more shapes and some awesome new features. :)

The new update is up for download, the ability to use transparent background was also included.

absolutely GREAT support from the author… he spent a lot of time with me making sure I was able to install the project correctly, and it looks beautiful on my site!

thank you!!!

Thanks for your feedback :). Make sure to come back once in a while to check out the newest updates of this script.

Hi there, I think this is really cool but how could i make it work for Wordpress? Also, how would I enable it on WP Multisites?

This script is not currently optimized for Wordpress and full-compatibility is not guaranteed. If you have a self-hosted wordpress site (meaning that you have acess to a MySql database and to FTP) you can install it as instructed in the Quick Start Guide, by uploading some files and creating a database.

Some of the buyers already use this on Wordpress. At the current version the script does not provide interface for managing multiple sites, so the script should be installed on each website you want to track.

I already purchased the item. And tried it tru my ASP.NET it works now. based on quick start instruction.

Right now, it show bubble effect.

How can I change the background effect?

Well, included you have a generator. By openning the .html fie inside the generator (note that you have to open it on web-server because of same-domain origin policy) you can create new styles using the inputs. Once you are satisfied with the results simply copy the code from the textarea to the header of your website as stated in the instructions. Archive downloaded->intAnimGenerator->index.html You can click on “video preview” here on codecanyon to see how to create styles using the generator.

Just got it! Thanks!

I have it running on our site and its working great apart from modern tablets and smart phones when the page loads solid white and no content any ideas? http://www.inspiredminds.com/web-designs.html cheers sheldon

hi thanks for prompt reply. Aafter removing the intAnim it displays the page perfectly all be it without the animation of course.

I can’t really debug atm, because my only connection to the world is an old iPhone 3GS. What are you applying intAnim on (body/background/ a div) ? If the whole page is white and there are no errors I guess that somehow the intAnim div is set over everything else. Try using a style with a transparent background and see if that works.

Ok, I got home today. If you are still having issues please send an e-mail to tips4design@yahoo.com and I’ll reply with a solution as soon as possible. :)

Hi tips4design,

Very nice and simplistic concept. I would probably be looking to apply my own shape, most likely Balloons. How would I do this? Is it simple to change as I did notice that it’s a ‘Possibility to use your own images as shapes’.

If you could let me know I would really appreciate it.

Many thanks G.Chaggar

You only have to upload the image with the balloon and add the image name in the generator as stated in the Quick Start Guide. If you encounter any problems when doing this, I would be glad to help even via a TeamViewer session.

As you can see here:
http://files.tips4design.com/intAnim/customImages.php
All the code needed for adding the images is:
img:’flame.png->120 flame1.png->80 t4d.png->80’ ,
which represents the name of the image and its size.

Here is a screenshot of the generator, I think it’s pretty easy to use :).

Thanks for your comment!
Cristy.

Hello,

I purchased your program and am very happy with the outcome. The only issue that I can see is that sometimes the stars disappear completely and only come back when I reload the page.

Here is the code that I am using:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>

<script src=”http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js”></script> <script src=”scripts/intanim.js”></script> <script src=”../../../Scripts/swfobject_modified.js” type=”text/javascript”></script> <script> $(function(){ var options = { img:’sparks/spark1.png->28 sparks/spark2.png->28 sparks/spark3.png->32’, bgcolor:’transparent’, types:’’, shapeNumber:’1.5’, parallax:’true’, bgfadespeed:’10’, }; $(‘body’).intanim(options); }); </script>

Hello,

The only reason the stars can disappear is because the FPS is too low to display all of them and the script tries to improve performance by reducing the number of particles. One thing that could “break” this is when you leave your website opened in a background tab because the browsers allocate very few resources for background tabs.

If the stars are disappearing while you look at the website then a FPS drop might also make the script think your computer performance is too low to display all of them.

Try setting a lower shapeNumber at first and see if they still disappear.

Anyway, I am currently working with a new library (called Pixijs) which improves HTML5 canvas performance a lot, by using WebGL (using the GPU to draw things instead of the CPU when possible). I will integrate it in the next update.

Do the ones in the DEMO disappear?

Can you tell me what browser are you using?

Thank you!
Cristy.

Thanks Cristy, The stars in the DEMO are not disappearing. I am using them as a background (transparent) on the body tag. Using Firefox v. 27.0.1

Do you have a could shape move in background ?

I don’t understand your question. You can have any shape/image set to move in the background. And I am currently working on a new version which will make using raster images or even SVGs easier.

can there be 2 shapes with 2 fill colors? I just bought this

Hello,

Sorry for the late response but I was on a vacation :).

For now you can only set one color for all shapes, but you can if you want use distinct images.

Thanks!

PS: I am working on an update and it’s almost ready :)

Hi does this support sound by any chance ? Would like to play background music for a rock band’s website, and when track completed, it then would go to another page..

Hello,

This is only an interactive canvas element which is meant to display some graphics on the background. It has noting to do with sound, but you can use another music-playing script along this one.

In other words, this is a HTML element as any other (eg: the text on your page) and does not play any sounds and does not not trigger any page changes. You can implement this events separately if you need them.

Hope this answers your question.

Thank you!
Cristy

hello just purchase the generator, how to import image thru URL ?

sample:

$(function(){ var options = { bgcolor:’#A34E4E’, img:’valentines/1.png->32 valentines/2.png->32’, [[ //—image source URL]] types:’’, }; $(‘body’).intanim(options); });

is it posible? thanks

Hello,

This script has not been updated in a long time, I do not think it was able to load images through URL because of the cross-origin domain issues.

I have been working on a new, improved version which uses another graphic renderer and I have also implemented the ability to load images via URL, but this version is not quite ready.

I recommend saving the images locally in the images folder along the other default images for now, until the new version will be out.

Make sure to subscribe to update notifications to this plugin so you will get an e-mail when the new version is uploaded (I try to finish the new version this month).

Hope this answers your question!

Thank you and have a nice day!
Cristy.

oh ok thanks, i will wait for the update..

Hi, can I use this for a table background? For instance, I want an animated headed, say, 1010px X 240px and have the ability to overlay text or transparent images over the top of it.

Will it work like that?

Thanks!

Ron

Hello,

Sure, the plugin is created as a jQuery plugin, and you can apply it on any jQuery element, eg: $(’#headerId’).intanim(options). A new version is almost ready, version that removes the shapes functionality, but improves performance (WebGL rendering), adds multiple image groups which can each have independent physics attached and even image tint. I just have to make a few more fix and tests until I update the new version.

I hope this answers your question.

Regards,
Cristy

Thanks for the prompt reply Cristy. Looking forward to seeing the new update.

Dear, please is it responsive ? Is it working with Avada theme of wordpress ? Thanks

Hello,

Yss, you can apply the background to any div/page regardless of the resolution. I didn’t test with Avada itself, but it should’t bs any problem.

Regards, Cristy

Hi This is a pre-sale question.

Would you be make sometime for the update that we can upload our own images.

And plus it can also allow for transparent background that it match our own background color.

Please advise before buy, thanks

Hello,

This script has had very low amounts of sales and I haven’t updated it in a long time. Yes you can have transparent backgtound color and you should be able to add custom images by manually uploading them via FTP or cPanel and changing some JS files or replacing existing images.

Regards,
Cristy

by
by
by
by
by
by