Can anybody help me please? Animated header

I have tried my best to find some info across the Internet, but it is really hard, so I decided to ask here.
Please, take a look at the header on Softvelopers site
How can you achieve the same animation? Or at least something looking close to it? The site is built on WordPress, I believe, so maybe I need to use some pulgins?

That’s more than an animation. That’s an interactive. I’d be surprised if there is a WordPress plugin for something as specific as that. But I’m new to WordPress.

Awhile back, a member/visitor of this form showcased something similar. It was pixels moving towards the pointer instead of lines moving away from the pointer. If memory serves me, that person hand coded it with JavaScript. There’s commands that have to do with reacting to the pointer locations. You can probably find tutorials on line for “pointer animations” or something of the sort.

Have you looked at it on a touch screen device?

This is really, really easy if you use something like particle JS.

Creating your own version wouldn’t be too difficult. The points would just be floating points that respond to the mouse position and the lines connecting within distance. It would be time consuming to get it exactly the same, but you could create an algorithm that simulates the perspective appearance by varying the opacity

Actually, google particle JS and mess around with the first link. It’s definitely what they used

3 Likes

Thank you very much for all the answers! I would definetely look up to particle JS.

You might want to do a Google search for HTML 5 Canvas too or canvas animations. Canvas is an HTML element that uses JavaScript of the sort Obsidian mentioned. For example, here’s are several other examples: https://davidwalsh.name/canvas-demos

Try this https://codepen.io/VincentGarreau/pen/pnlso hope that helps

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook