Header image – animation on page load

[mariatrier]

Hi there,
I have searched the forum but could not find any answer. How do I remove the hero image animation on page load? I want the hero image to load like a regular image.

Thanks

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.page-heading.fancy-heading{
display:block !important;
transform:none !important;
}

Thanks
Mohammad

[mariatrier]

I have copied this code into theme options custom css, but is did not change anything.

[Kyle – SUPPORT]

Add this:

.page-heading.fancy-heading.animated, .fancy-heading.animated .heading-text {
  transform: none !important;
  transition: none 0s ease 0s ;
}

– Kyle

[mariatrier]

This reply has been marked as private.

[Kyle – SUPPORT]

If you’re referring to the image sliding down, I’m afraid it’s not possible to turn that off via css

– Kyle

[mariatrier]

eh yes, that’s what I’ve been asking about 😉

So if not via css, how?

[David Martin – Support]

Hi,

Have you resolved this, your hero image loads normally for me with no transitions/effects.

– Let us know.

Thanks,
David.

[mariatrier]

No, not resolved?

http://woocommerce-4013-9163-42465.cloudwaysapps.com/om-net-1/

[Kyle – SUPPORT]

I have forwarded this to the developer for you to see if he knows a quick edit you can make

– Kyle

[Swift Ideas – Ed]

Hi there,

You can try this css:

.page-heading.fancy-heading {
height: 564px;
}
.page-heading-breadcrumbs.fancy-heading .heading-text {
opacity: 1;
}

– Ed

[mariatrier]

Works for the image, however not for the title and text? This still “jumps”

[Swift Ideas – Ed]

The reason for the animation is this happens after the content has been vertically centered – thats why it animates in. You can do it without this, but may not work well on all browsers.

.page-heading-breadcrumbs.fancy-heading .heading-text {
    opacity: 1;
    margin-top: 0!important;
    transform: translateY(-50%)!important;
}

Remove all previous code relating to this before using that.

– Ed

[shawnaleighdesigns]

Was this ever resolved? I’m trying to figure this out as I don’t want the movement in the hero header but I can’t find any solutions that work.

[Swift Ideas – Ed]

Hi @shawnaleighdesigns

The code in my previous message should be all that’s needed. If you’d added that to your site please provide a link so that I can see it in action.

– Ed