Streaming live at 10am (PST)

Scale buttons with background


#1

I’m trying to replicate the homepage of this site with 2 buttons.
http://depanneuranglais.com/
I do not see how I can make my buttons follow the background in responsive view like this site with webflow.
someone can help me?
https://preview.webflow.com/preview/testdepang?preview=d526a3f9edeadfb5efb1eebcbc136494

Thank you


#2

You’ll have to actually create a div that is 100vw and 100vh and apply a scale and rotate interaction on the button to control the div position. this should help you get started. https://university.webflow.com/article/rotation-on-mouseover

And for interaction basics.


#3

for the moment I would only like the buttons to grow and shrink with the background image when I stretch the browser window. No need interaction for now.
see my example.
http://testdepang.webflow.io/exemple


#4

Execute this hierarchy:

Body
└ Wrapper (DIV) [Go to ‘Child Perspective’ and set the value to 1000]
…└ Background (DIV)
… …└ Sticker (DIV)

Select the ‘Sticker’ DIV and go to your interactions panel. Create a new ‘Mouse Hover’ interaction via the ‘Element Triggers’ section. ‘On Hover’ select ‘Start an Animation’. Create a new timed animation and chose the option ‘Rotate’ and the option ‘Move’. Right-click these animation actions and change the target elemnet to the ‘Background’ DIV. Duplicate both of these and chose your start and end values. Move closer using the Z-axis and Rotate on the Z-axis.

You will need to make sure your Sticker DIV is only the size of the sticker, otherwise, you won’t get the results you are looking for.


#5

thank you, for its clear explanation step by step. The animation works well. Except for the scroll bars, when I over the sticker, how can I remove them.
And how do I make the sticker always stay in the right place even in a responsive view?
http://testdepang-copy.webflow.io/


#6

Size the DIV containing the sticker using VW (Viewport Width) and VH (Viewport Height) not pixels. Do the same with the DIV’s margins (to equal 100%). You can also us the flex tool to do the same thing, but just offset the location of the sticker DIV using VW and VH margin sizes. I’m still learning Webflow myself, but if I remember correctly, the scrollbars should go away if you select Overflow: Hidden on the ‘Wrapper’ layer.


#7

thanks again, the scroll bars are disabled. You still learning but you are definitely better than me! for the sticker I put margins on the right and left (VW), I will have to adjusted this margin for each desktop tablet mobile views? And when I put a margin (VH) bottom to raise the sticker it is in the right place but when I toggle preview or bublish it is too high :frowning:
(sorry for my english I use google translation)


#8

Looks like you need to set up the background to fill the div and center it, no tiling.


#9

my background is already set to cover, top center and no tiling


#10

needs to be center center, not top center


#11

I d’ont want to cut the top of the background i want to see the sign depanneur anglais in all view like my exemple: http://depanneuranglais.com/