Hi guys,

I am trying to create a fast and smooth flickering / blinking logo. With my limited knowledge on javascript i've come up with the following script that basically does the job, but the 'animation' isn't smooth at all. Does anyone have an idea how I could go at this easy?

Check this demo on how I approached it. It works perfect how I want it locally, so I guess I need a way to start the animation when all images are loaded and doesn't required to be loaded each time.

Thanks a lot for any help that might come my way!

Recommended Answers

You could use JSTween to do it, but it is rather simple and could easily be done in jQuery without the use of a plugin.

I would do something like this http://jsfiddle.net/pixelsoul/8XNe3/

If you're talking more about pre-loading the images, there are plugins to do that, or you …

Jump to Post

Ah okay. Yes, pre-loading the images would probably be the best solution then.

Jump to Post

All 6 Replies

You are on the right track. However if you want a smoother better animation, you will probably have to use some pre-written JS library that deals with animation like JSTween.

Otherwise, you will need to write quite a bit of code to perfect it.

Another alternative is to use CSS3, but not all web browsers support that yet.

Thanks for your answer, but how would I go about it with JSTween? I don't see any animations to flicker images.

You could use JSTween to do it, but it is rather simple and could easily be done in jQuery without the use of a plugin.

I would do something like this http://jsfiddle.net/pixelsoul/8XNe3/

If you're talking more about pre-loading the images, there are plugins to do that, or you could roll your own with the numerous tutorials online.

Hi Pixelsoul,

I don't like the fade in, I want it like the demo i gave, but when i upload it to my full website, it starts flickering white and takes a lot of time to load the image each flicker.

Would preloading be the solution?

Ah okay. Yes, pre-loading the images would probably be the best solution then.

How would I set this up? I imagine something like: Do not start this function untill all images are loaded. Is that something simple to do? And if so, how.

Already thanks a lot for your help :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.