Header animation effects

Hi there,

this would take some serious custom development, and reading through the article the code they provide is good for demo purposes but needs more work to increase performance on a live site.

is there any particular effect you're interested in?

thanks david, i am interested in this one: https://tympanus.net/Development/ArticleIntroEffects/index3.html

Yes, I understand that this is something that will require a lot of custom work, just starting out with actually editing code. I can put together stuff if there's a clear guide, this one, unfortunately assumes some advanced prerequisite knowledge.

I ll start with what i have in the article and update here. If you can have a high level look and give me a few pointers, that would help a great deal.

Thanks!

By the way, do you guys do paid custom wordpress design?

Ok, so i have had a nose at the downloaded code.
It is very specific to the markup they have used.
But the basics are:

There are three style sheets being enqueued in the head:

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

And one JS in the Foot:
<script src="js/classie.js"></script>

These would need to be added to a child theme in the JS and CSS directories and the URLs in the above links would then need to be absolute paths to them.

There is also some inline JS below the above script, that does some of the scroll transitions. This should also be included.

You can use the Hooks Element for those links in the wp_head and wp_foot the latter could also include the inline script.

https://docs.generatepress.com/article/hooks-element-overview/

Then the container that you wish to target needs a specific class added to it, in this case its listed here in the markup

<div id="container" class="container intro-effect-sliced">

ie. intro-effect-sliced

You could try getting all css and JS loaded and then create a container div with that class added to see if it works. Then we could explore how to add the class to an element container in the theme.

As a note the CSS stylesheets the demo comes with contains all the CSS for the entire pages and all the examples, so you may want to isolate just the classes you need.

Thanks!

You're welcome. Hope it works out well.