Animated background options

Get Started
1

Hi all,

I’m working on a website and would like an animated background at the top of the home page, I’ve only ever worked on static sites so I don’t know where to begin. I want to try and do it myself as I know HTML & CSS and I’m a very quick learner - all self taught. Although I’m thinking I may need to get a professional in for this.

I’m very interested in hearing everyones advice and opinions on where I can go with this next…

I’ve seen the particles.js which is awesome, I would like it to work similar but with this kind of design:

2444×1486 68.4 KB

(Please ignore the colours and design as its a very quick draft, just to show the layered shapes)

The animation would start on page load; the objects/shapes slowly moving randomly around the screen in the background. An added feature would be, on mouse rollover the squares moving slightly; following or bouncing away from the cursor.

I’m wondering if this could be done in CSS3 or would need to be Javascript? Or could I achieve some of this using CSS3 but need Javascript for following the mouse, for example?

I would really appreciate any guidance on this, I look forward to hearing your advice

Thanks
J

2

You can do so much with css animation.

For any kind of interactivity like this you would likely need js, also for true random movement.

Check out some examples on places like Codepen to get some ideas.

3

That particle.js seems to do what you want (when using the control panel to change things around and saving to a codepen).

e.g.

As Sam said you will need js if you want interactivity and random assortment of directions etc.

You could do something simple with css just using keyframes but there would be no randomness to it just a repeating sequence and no interactivity of course.

Anything more complicated is going to take some time to write from scratch so you may be better off using a specialised application.

1 Like
4

Thanks @SamA74 & @PaulOB - your replies have been a huge help! Thanks so much!

It looks like I may be able to get at least a prototype done with particles.js then, that awesome, thanks again!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.