How to add script for top image area

Hi there,

i can only provide some guidance on how to do this as it is custom development. So give this a shot - in this example its using the birds animation:

1. Add New Hook Element
https://docs.generatepress.com/article/hooks-element-overview/

Add this content:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.birds.min.js"></script>

Select the WP_Head hook.
In Display Rules set this to the Page you want to add this effect.

2. Add new Header Element
https://docs.generatepress.com/article/header-element-overview/

Add this content:

<!-- Vanta JS Header - you can also add HTML below to display over the top --> 

<script>
VANTA.BIRDS({
  el: ".vanta-header"
})
</script>

This code is generated here:
https://www.vantajs.com

In the Element Classes field add: vanta-header
Add some Top and Bottom padding to give the container some height eg. Top 300px and Bottom: 300px.

Set your Display Rules to match what you have in your Hook Element.

thank you so much for your addvice.
I will try this tomorrow!

You're welcome.

I could display birds finally for your advise!
thank you so much.

I have one more question.
when I load https://axc-g.co.jp/
the canvas of the vanta is looks like this

<canvas class="vanta-canvas" width="1210" height="371" style="position: absolute; z-index: 0; top: 0px; left: 0px; width: 1210px; height: 371px;"></canvas>

but when I change browser size(change just one pixel) its changed to like this.
(this is what I want from first loading)
<canvas class="vanta-canvas" width="1197" height="575" style="position: absolute; z-index: 0; top: 0px; left: 0px; width: 1197px; height: 575px;"></canvas>

This might be vanta script problem?

If you have any idea, I m appreciate.

Regards

Awesome :)
That question you would need to ask of the VantaJS author. I did take a quick look and i don't have that issue on my desktop.

ah sorry I was trying full screen option of Generate Press.
changed back now.

Try adding this CSS - not sure it'll work but worth a shot:

.page-hero {
    min-height: 720px;
}

thank you so much! it does perfectly works.
need to remove weird background now.

Haha - too many teeth in that photo lol
Happy to be of help.

my boss added it, well let him change it. haha
thank you so much!

Best Regards

lol
You're welcome