Streaming live at 10am (PST)

How do I adjust the position of an image outside the website?


#1

Hello,

I want to know how to create the same visual effect as the following image in webflow.com:

So now that you see the example my question is... How do I add an image, and put it at the border of the page and make it appear from the outside of the page with an interaction but without it showing a scroll bar on the website. My problem is that in my website when trying to create an interaction to move from outside to the inside of the page, it shows a slider in the website like this:

I just want to do the same as in the webflow website. So that the image goes from out of the page into it, but without it creating a scroll bar.

How do I do this??

Thanks!!

Melissa


#2

Use overflow: hidden on a parent div or section that contains content that moves beyond the page boundary and the scroll bars will not appear. You can set a wrapper for your entire page to handle all overflow content if needed or address it by section or element.


#3

I added a class to the column and selected overflow: hidden, just as you suggested.

However the interaction that I created is set to move the picture from the right to the left and appear in the page. The interaction is triggered with scroll. However when the page loads and before I scroll to that part of the website there is still the scroll bar because the picture is moved to the outer part of the website. What am I doing wrong?? thanks!!


#4

Usually that will sort it for me. Not sure?

If you share a link to your page other users and Webflow staff can see and help you sort things in a single step.


#6

Well you're right!! It works now. I don't know how I made it work, but it's ok now. Thanks!!


#7

I have another question though.

How can I align the other the other column to the body margin??? I found that the rows in my website that have this effect (image coming in from the outside of the page) are not aligned to the rest of the containers of the website layout. How do I do this??

thanks!


#8

The other thread answered this question, right?


#9