Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Page Header zoom in animation

Home Forums Support [Resolved] Page Header zoom in animation

Home Forums Support Page Header zoom in animation

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #587793
    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

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #587798
    David
    Staff
    Customer Support

    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?

    #587958
    Ivan Cazorla

    Hi David,

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

    Thanks,
    Ivan

    #588009
    David
    Staff
    Customer Support

    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.

    #588018
    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

    #588038
    David
    Staff
    Customer Support

    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

    #588091
    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

    #588104
    David
    Staff
    Customer Support

    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.

    #588106
    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

    #588109
    David
    Staff
    Customer Support

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

    #588111
    Ivan Cazorla

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

    Thanks again,
    Ivan

    #588121
    David
    Staff
    Customer Support

    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.

    #588125
    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

    #588131
    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

    #588494
    David
    Staff
    Customer Support

    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/

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.