Page Header zoom in animation

Hi Ivan,

which elements do you wish to 'zoom'? Just the page header background image?
And how is this to be triggered? On load or Hover?

Hi David,

Yeah, just the page header background image. This would be triggered on load.

Thanks,
Ivan

Hi Ivan, the CSS method for you to play around with:

.generate-content-header {
	-webkit-animation: imagezoom forwards 1s ease-in;
	animation: imagezoom forwards 1s ease-in;
}
@keyframes imagezoom {
    0% {
        background-size: 100%;
    }
    100% {
        background-size: 105%;
    }
}

Its a bit hit and miss on safari. Let us know.

Hi there, it kinda works. A bit of a glitch also is doing, not 100% smooth, but I think I can deal with that. Definitely not working in Safari.

Thank you,
Ivan

Hi Ivan,

this may work better for you - javascript (add to footer hook) to add class to pageheader on zoom. And then some simple CSS to deal with the transition:

https://gist.github.com/diggeddy/eeb0fb894b1b94be27daf29bee6bfbe7

Hi there! It works! Also on Safari! But check the link down below and you will see that it makes a little of glitch effect, not smooth.

https://ivancazorla.com/sobre-mi/

Thanks,
ivan

It looks pretty good to me! great looking site btw.
I have updated the Gist to include hidden backface visibility this should help a little.
Unfortunately they're never as smooth as using a transforms scale property, which can't be used in this instance.

try the new code and let me know.
may also want to try tweaking the scale % and transition times. there are other easing (ease-in) functions that may help:

https://easings.net

You can use all of them aside of the bottom row with CSS.

Thank you!! I'll try that out! I'm still testing and designing the website, making it as clean as possible, isn't finished yet. I'll let you know when it's finished! You can really achieve great results with GeneratePress!

Appreciate your help,
Ivan

You're welcome Ivan. Be good to see it when it's finished ;)

Btw, in which instance I could use the transform scale property to make it smoother?

Thanks again,
Ivan

You can't apply it to a background image, only to it's container.

So if you used transform: scale(1); and transform: scale(1.1); instead of the background sizes, it would resize the page header container and everything within it. It would also overflow the page container causing horizontal movement.So that would have to be accounted for as well.

Oh, I understand! And I've also tried it and its smooth like butter!! Wish that could be possible to do without scaling it the hole container.

Thank you,
Ivan

But i think I can use that effect in other images that I may have through the website. Is it possible to trigger the effect with a delay or trigger it when the element is visible on screen?

thanks again,
Ivan

You can add delay to the animation with the animation-delay: 250ms; property. This gets added to the selector not the animation rules.

To add a class when an element is in view, might be worth trying this out. It uses JS and jQuery ( which is cool as you are already loading the jQuery library for Slick Slider):

http://jsfiddle.net/z3xTU/15/