Zoom effect on Header Element

Hi there,

that site is using some CSS animations... might be able to copy that.

Do you have a site you want to apply it to and i can have a play ?

Hi David, indeed I tried to use the transitions CSS I've found on this page but could not find the right way...

You'll find a link to a staging site in private info

Hi Samuel,

Try adding this script:

<script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
		pagehero.style.backgroundSize = 150+'%';
		pagehero.style.opacity = '1';
}
	
	document.onload = hero_animation();
</script>

And then add this CSS:

.page-hero{
	 transition: background-size 1s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1s ease-out 0.2s !important;
	opacity: 0;
	background-size: 100%;
}

Hello Elvin, thanks for your help,

This is not working, image header is not showing.

Tried to play with your proposal but didn't find a solution...

You confirm that adding your script in Element > Hook set to wp_header + Entire Site is the proper way ?

You confirm that adding your script in Element > Hook set to wp_header + Entire Site is the proper way ?

My bad. I forgot to mention that the script should be hooked to wp_footer to ensure the element loads first. Else, if it was added on wp_head, you'll get an undefined error because the .page-hero element has yet to load.

You can actually check how it'll work on this sandbox demo - http://elvin.wppluginsupport.net/?p=25

It's half working, working on desktop but not on mobile (making image full width on mobil instead of cropping to vertical dimension as it's acting normally).

FYI I inverted the effect : making it 100% on script and 150% on CSS to have the effect I wanted.

Playing with it, it appears that for mobile it would need a 300% to 200% zoom effect.

How do I tell script to behave differently on desktop and on mobil ?

Can you try setting the background position to center center on the Header Element settings?

Also, on the CSS, try changing the background size to background-size: 100% auto;

on the JS, try pagehero.style.backgroundSize = 150+'% auto';

Or do it vice versa (150% on CSS, 100% on JS if you want zoom out).

I can't set background position to center center if Parallax is activated. Any possibility to have both ?

By the way, your solution is not working on mobile.

I tried this without success :

<script>
				
	if(window.screen.width < 768)
{

   var pagehero = document.querySelector('.page-hero');

function hero_animation(){
		pagehero.style.backgroundSize = 200+'% auto';
		pagehero.style.opacity = '1';
}
}
		
else {
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
		pagehero.style.backgroundSize = 100+'% auto';
		pagehero.style.opacity = '1';
}}
		document.onload = hero_animation();
</script>

I can’t set background position to center center if Parallax is activated. Any possibility to have both ?

If you need both, we may have to completely change how the background is added as doing it w/ background-image CSS is limiting. (We can't scale background-size from a specific value like cover + 20% to "cover")

Your reference site actually doesn't add the animation directly on background-image as a CSS, it animates the element dedicated for holding the background image. But we can't do it with the current setup because the main wrapper is where the background element it. There's no dedicated element to animate for background to use scale.

Which is basically this one:

@keyframes backwash {
  0% {
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Question before proceeding:

Is the background a featured image? Or perhaps a static value you've assigned to the page through the Header element?

It's a featured image

Those kinds of effects are reliant on a Parent Container that has overflow hidden and a Child element for the background image.

But the Header Element doesn't provide the necessary HTML for that, it would be a little tricky to make it happen... not impossible... until you point out the Parallax, which completely ruins that.

You would need to get that custom developed i am afraid.

Thanks David, let's forget the parallax step it's not really important, I just needed help to make it work on mobile.

I tried this without success :

<script>
				
	if(window.screen.width < 768)
{

   var pagehero = document.querySelector('.page-hero');

function hero_animation(){
		pagehero.style.backgroundSize = 200+'% auto';
		pagehero.style.opacity = '1';
}
}
		
else {
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
		pagehero.style.backgroundSize = 100+'% auto';
		pagehero.style.opacity = '1';
}}
		document.onload = hero_animation();
</script>

Would you have a solution to fix it ?

Thanks a lot