Streaming live at 10am (PST)

Creating a Scrolling Computer Screen


#1

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

http://www.hellobonfire.com/work/neuwly

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


#2

Hi @Michael_Messina

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.

:slight_smile:


#3

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:

https://preview.webflow.com/preview/testingplayground?preview=eaf772107fb9b54c77952adb2d2647e2

:wink:

Cheers,


#4

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


#5

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.


#6

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


#7

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