[Support request] Zoom in or zoom out of the background

Home Forums Support Zoom in or zoom out of the background

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1498950
    Rafał

    Do you have any idea how to create zoom in or zoom out efect only on background image like on this vid

    Duration time: 7:18 – 7:26

    Thank you

    #1498963
    Elvin
    Staff
    Customer Support

    Hi,

    Can you link us to the site you’re trying to apply this on? So we could inspect and give you the most appropriate way to achieve this.

    You can provide the site details on the Private Information textarea. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1499025
    Rafał

    ok

    #1499033
    Elvin
    Staff
    Customer Support

    Thank you.

    Any particular event trigger for this? (example: zoom on hover?)

    Or perhaps you want this to zoom onload?

    A wise man once said:
    "Have you cleared your cache?"

    #1499039
    Rafał

    Probably onload. I just want to create a simple zoom in or out when someone enters the website without replays.

    Hover case it’s solved on this forum.

    #1499087
    Elvin
    Staff
    Customer Support

    This is pretty tricky to do. Bare with me.

    First, we must alter your GenerateBlocks structure.

    See this image for structure reference:
    https://share.getcloudapp.com/WnuryEA1

    It’s basically, 1 “Wrapper Container” with 2 more containers inside it.

    For the 1 “Wrapper Container” added with the CSS Class relative-wrapper.

    You then place the background-image on the 1st container and add CSS class zooming-bg on it.

    The 2nd container’s purpose is for your section content, place your contents there and add CSS class zooming-bg-content.

    You can add the CSS class on Container Block’s Settings > Advanced. There should be a “CSS Classes” text field there.

    Once everything is placed. You can add this CSS code:

    .relative-wrapper{
    position:relative;
    overflow:hidden;
    }
    
    .zooming-bg{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    animation: zoomBG ease-in-out 8s 1;
    
    }
    
    .zooming-bg-content{
    position:relative;
    }
    
    @keyframes zoomBG {
      from {transform: scale(1);}
      to {transform: scale(1.5);}
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1499359
    Rafał

    How do you create this structure? I have totally no idea how to expand the structure to “tree view”.

    Should I follow this docs https://docs.generatepress.com/article/adding-a-container-wrapper/ ?

    #1499364
    Elvin
    Staff
    Customer Support

    Here’s a demo video on how to create this kind of layout.
    https://share.getcloudapp.com/4guJK15p

    To put it simply, we’re basically placing 2 containers inside a container.

    A wise man once said:
    "Have you cleared your cache?"

    #1500100
    Rafał

    Almost fine – it’s come back to the start position after zoom. You can check it live now.

    #1500528
    Elvin
    Staff
    Customer Support

    Let’s try replacing the animation CSS.

    Replace the previous animation: property to this:

    .zooming-bg{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    animation: zoomBG 8s normal forwards ease-in-out;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1500761
    Rafał

    you are awesome 🙂

    #1500770
    Elvin
    Staff
    Customer Support

    No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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