- This topic has 11 replies, 2 voices, and was last updated 1 year, 8 months ago by
Elvin.
-
AuthorPosts
-
October 21, 2020 at 1:36 pm #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
October 21, 2020 at 1:54 pm #1498963Elvin
StaffCustomer SupportHi,
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?"October 21, 2020 at 3:18 pm #1499025Rafał
ok
October 21, 2020 at 3:24 pm #1499033Elvin
StaffCustomer SupportThank 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?"October 21, 2020 at 3:32 pm #1499039Rafał
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.
October 21, 2020 at 4:52 pm #1499087Elvin
StaffCustomer SupportThis 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/WnuryEA1It’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?"October 22, 2020 at 12:13 am #1499359Rafał
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/ ?
October 22, 2020 at 12:21 am #1499364Elvin
StaffCustomer SupportHere’s a demo video on how to create this kind of layout.
https://share.getcloudapp.com/4guJK15pTo put it simply, we’re basically placing 2 containers inside a container.
A wise man once said:
"Have you cleared your cache?"October 22, 2020 at 8:09 am #1500100Rafał
Almost fine – it’s come back to the start position after zoom. You can check it live now.
October 22, 2020 at 3:04 pm #1500528Elvin
StaffCustomer SupportLet’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?"October 22, 2020 at 11:37 pm #1500761Rafał
you are awesome 🙂
October 22, 2020 at 11:48 pm #1500770Elvin
StaffCustomer SupportNo problem. 🙂
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.