Josh Jennings

Scrollable Browser Mockup

  • Save
Scrollable Browser Mockup scroll css web design mockup

Website mockup using only CSS with a graphic browser container and scroll effect to see entire website. Great for showing off a website design on a portfolio.

View in CodePen:
https://codepen.io/jenningscreate/pen/VBqOKB

I was having a hard time figuring out how to showcase full website projects on my portfolio website. I had the original idea to use a computer mock-up and have the page scroll inside of it. However, the computer was too hard to handle, especially for responsive. I had this idea while on my way to work and had to do a voice recording describing the design so that I didn’t forget. I built it as soon as I got to work in about 30 minutes. I think it turned out so much cleaner and beautiful.

keyboard shortcuts: L or F like