Creating a Scrolling Computer Screen

Michael_Messina · January 19, 2017, 9:50pm

Does anyone know how I would go about creating this effect where the website scrolls inside the screen?

I would like to try to create something like it for my website. Is this possible within Webflow, or is this an external plugin?

Brando · January 19, 2017, 9:56pm

You can place a div inside the image of a blank computer screen, and set it’s dimensions to line up with the screen. Set the div to overflow: auto.

Add in the image of the site you want to display, and as long as the dimensions of the image are correct, this should give you the desired effect.

aaronocampo · January 19, 2017, 10:06pm

Hehehe @Brando you beat me!

@Michael_Messina exactly like Brando said, apply the scroll view or auto scroll view to the div you want to affect and put the image inside.

Here’s how it looks:

And if helps you, here is the preview link where I created one, check the inside scrolling page:

Cheers,

Brando · January 19, 2017, 10:06pm

I may have beat you @aaronocampo but yours was much more thorough

Michael_Messina · January 20, 2017, 5:36am

Thank you so much this works. Y’all are the best!

Just trying to figure out how to hide the ugly scroll bar that comes along with it now.

aaronocampo · January 20, 2017, 5:22pm

What do you mean @Michael_Messina? Can you share a screenshot please?

system · March 22, 2017, 2:22pm

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.