Streaming live at 10am (PST)

Any way to create an animated hero?


#1

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:

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

I'll appreciate any help. Thanks

Charlie


#2

@jarda created an incredible tutorial that covers this. :slight_smile:


#3

Excellent. tha was very helpful!
Thanks


#4

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?


#5

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


#6

Thank you mr McGuire for summoning me! Much appreciated :hamburger:


#7

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


#8

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


#9

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 :wink:


#10

Sure thing. I will share the project


#11

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