[Resolved] Page Header zoom in animation

[Ivan Cazorla]

Hi there! Love using generatepress and the page header function, works really well. My only doubt on this if exists a possibility to add a zoom in or out animation like some sliders do?

Don’t wanna use an another slider plugin and replace the page header function and make it as clean as possible,

Thanks,
Ivan

[David]

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?

[Ivan Cazorla]

Hi David,

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

Thanks,
Ivan

[David]

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.

[Ivan Cazorla]

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

[David]

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

[Ivan Cazorla]

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

[David]

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.

[Ivan Cazorla]

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

[David]

You’re welcome Ivan. Be good to see it when it’s finished 😉

[Ivan Cazorla]

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

Thanks again,
Ivan

[David]

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.

[Ivan Cazorla]

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

[Ivan Cazorla]

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

[David]

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/

[Author]

Posts