Any way to create an animated hero?

[carlos94587 (Carlos Cortes)]

Wondering if any of you guys can help to create an animated hero. I have to embeed some code to create something like this demo:

http://tympanus.net/Development/AnimatedHeaderBackgrounds/index.html

This is the code I found:
http://codepen.io/nodws/pen/vKoKoG

Here another example: http://www.trustnetfinancial.com/

I’ll appreciate any help. Thanks

Charlie

[McGuire]

@jarda created an incredible tutorial that covers this.

[Mini-Tutorial] How to Integrate Particles.js in Webflow

Hello Webflow community, Here's a mini-tutorial on how to integrate Particles.js by Matt Boldt in Webflow and turn your presentation into beautiful, living, interactive and highly customizable master piece. You can find it here: http://particles-js.webflow.io/ You can also clone this to your project at my profile. Shoutout to @SidneyOttelohe - Sidney, I used your site and credited you, hope it is alright! I am not affiliated with particles.js, but I find it really great, so filling in th…

[carlos94587 (Carlos Cortes)]

Excellent. tha was very helpful!
Thanks

[carlos94587 (Carlos Cortes)]

I made it however, I have 2 CTA’s on the hero and they stopped working, since the particles js has a click option guessing if that disabled the actions of the links.

Any thoughts?

[carlos94587 (Carlos Cortes)]

hi @jarda you think you can explain me how to fix this. I’ll appreciate your help. thanks.

[jarda (Jarda Zapadlo)]

Thank you mr McGuire for summoning me! Much appreciated

[jarda (Jarda Zapadlo)]

Hello Carlos94587, thank you for your question. It took me a while of life contemplation before I was able to put my mind together.

Well, the problem is that particles canvas (where the is floating stuff is happening) is overlapping your CTAs - canvas is ABOVE the buttons.
Solution is simple.

1. select your CTA button
2. set position of button to Relative (in styles tab)
3. set Z-index of button to any high number, let say 999. Z-index is located also in Styles tab if you choose element position to relative or absolute.

If you do not want to mess with your button position, you can select the layer, set the relative or absolute position to it and set this z-index to very low number.

What you need to achieve is to position CTA buttons ABOVE the layer with particles.

Hope it helped!

You can check http://notix.webflow.com - here is it implemented with CTAs. However, please make sure you follow steps above.

Jarda

[carlos94587 (Carlos Cortes)]

Thank you @jarda - I will. Ythis is very helpful

[jarda (Jarda Zapadlo)]

Happy to help!

Make sure you publish your design here, in forums. People are great and feedback can push you to better result, if is negative enough

[carlos94587 (Carlos Cortes)]

Sure thing. I will share the project