[Resolved] Scale background image on page load using block effects

[Brenden]

I am trying to scale a background image after the page loads using block effects. Currently I can only get the scale effect to work on hover or if I change the ‘state’ from ‘Hover’ to ‘Normal’ the background image is already scaled and there is no animation to the scaled state.

I want to create an effect similar to the page hero on this page – https://bythehand.org/about-us/.

[Ying]

Hi Brenden,

You can try add the transition to the effect, set a long transition time, like 20s.

[Brenden]

I must have something setup incorrectly.

Here are the Transform effects I have setup – https://share.getcloudapp.com/rRuOwPZB
Here are the Transition effects I have setup – https://share.getcloudapp.com/DOudnNpK

How should the effects be setup?

[David]

Hi there,

GBs effects won’t trigger on load.
You will need some Javascript.

1. Keep the Effects you have so far.
2. Select the Container that has the Background image and in Advanced > Additional CSS Class(es) add: animated-hero
3. Use a Hook Element to add this script to the wp_footer:

<script>
var pagehero = document.querySelector('.animated-hero');
function hero_animation(){
	setTimeout(function() {
    pagehero.classList.add('loaded');
  }, 500 );
}

document.onload = hero_animation();
</script>

4. Add this CSS:

.animated-hero.loaded:before{
    transform: scale(1) perspective(1000px);
}

Note you can:

a. Adjust the 500 value in the #3 script – that adds a 500 ms delay before the class is added.
b. Adjust the transition time on your GB effect

[Brenden]

I believe I have everything setup as specified, but it is not working yet. What am I doing wrong?

https://powercompany.wpengine.com/style-guide/

[David]

I made an edit to #3 script above:

https://generatepress.com/forums/topic/scale-background-image-on-page-load-using-block-effects/#post-2226655

[Brenden]

That did the trick! Thank you!

[David]

Glad to be of help

[Author]

Posts