[Support request] How to add script for top image area

[Ryo]

Hello
I am trying to use Vanta JS
https://github.com/tengbao/vanta
for top image.

the website is here
https://axc-g.co.jp/

I want to make website looks like this
https://axisadmin-my.sharepoint.com/:i:/g/personal/iwasaki_ryo_axc-g_com/ERq2adwg6OJAtWwtE29xP8cBmyNbVCwCObjBsycxbhZBxg?e=h2Eiuy

Where should I change to do this?

[David]

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.

[Ryo]

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

[David]

You’re welcome.

[Ryo]

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

[David]

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.

[Ryo]

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

[David]

Try adding this CSS – not sure it’ll work but worth a shot:

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

[Ryo]

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

[David]

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

[Ryo]

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

Best Regards

[David]

lol
You’re welcome

[Author]

Posts