Streaming live at 10am (PST)

Navbar moves Site Content


#1

hi,

have anyone an idea how i can set an interaction which open with a click on a button a subnavigation that moves down the rest of my content below. like the follow link:

http://www.mz.gov.pl/aktualnosci

Thanks
Toby


#2

The principle is that:

Design your page with your menu open. So navbar, then submenu, then content. Be sure that your submenu section or container is overflow:hidden.

Now give this submenu the property height:0. You now just have to create a click interaction that will affect another element (the submenu) and give it height:auto... it should now unfold on click pushing down away the page content.


#3

Hey Vincenct.

you are my man. smile Thanks very much. I found the webflow tut, but i didn't saw that they set the element to overflow hidden. One click changes all. wink

Thanks
Toby


#4

Yep I mentionned it because I remember running into it when I first tried. And a lot of people come here asking for exactly that (:

Little tip: for the unfolding of your menu, try to use ease-out-cubic, I find that it's the best easing method for unfolding anims... it 'snaps' nicely.


#5

hi vincent,

ok. thank i'll try the ease-out-cubic effect. wink

have you tried to work with mask effects in webflow?
i just try to mask an circle over an image.
the image should displayed in the mask ( circle )


#6

Make a div, give it overflow hidden and radius 50% for all corner, you get a circle. Declare a bakground to it (:


#7

hi,

thanks for your feedback.
how can i mask a div?


#8

I wroter "Make" as drag a new div into the designer (:


#9

Ah. OK. smile OK i have a circle and a background image, but no mask. frowning


#10

i want animate the circle perhaps from start point A to start point B.
And when its animate you'll see parts of the masked background image.


#11

give the div overflow : hidden property


#12

hm. yes. i did this.


#13

Can you please share your project’s public link so it's easier to understand your issue?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link


#14

can i reach you directly to a mail address?


#15

oh if you don't want the url to be public, click on my avatar here an PM it to me, but I'll answer here afterwards so the thread can help others.


#16

Well here is what I was talking about:

https://v.usetapes.com/c7F8EOhoz8

Now I understand that you want to move the disc and the image remains fixed. can you tell me everything about the motion you want to end up with?


#17

hi,

i think about such a effect. its mad in photoshop. wink

https://v.usetapes.com/U2KAcY3HpH


#18

Haha you're using Tapes like mé wink be aware that it records your sound too, I could hear the ambiance. You can Mute it in the menu.

Ok so you want to spot to follow your cursor?

I'm going to summon @bartekkustra because I feel this would be far easier to put in place with JS. ninja, what's your opinion?


#19

yeah. can you hear the music smile

it can be a cursor follow or the easy way only a circle masked button that i can give an interaction. uffz...


#20

Hello @vincent :) Cześć @Toby :)

That's some serious interaction you want to have but I think it's doable. I'm thinking of having 2 background images. One will be the image you have in the background and the second one could be the SVG with a plain-white box and a circle inside.

Now the tricky part comes. A JavaScript code that will find where the cursor points to and move the background SVG image to proper position.

It might take a longer "while" to create such script. but should do the trick.

Why do you need such thing?