Scrollable Interaction
This is a bit of an old one I dug up while going through my files from around 2019. Basically, just a neat little CSS interaction I had originally created a desktop screen that would appear to stay in place even when the contents of that screen changed.
The code always ended up running into issues (but occasionally worked!) and I could never figure out why whenever I could get it to work in certain demos. After taking another look I realized I had so many conflicting lines of CSS on the website that it was breaking this interaction in particular which relies upon background-attachment: fixed; Thankfully now with a little more experience I was able to quickly clean it up recently.
This means this interaction does not really work well on mobile browsers iOS safari and Android browser currently do not support this style.
Additional content can be added to extend the scroll. This also relies on having the same frame for every background image used. I think there is probably a better way to go about this in the future by just positioning the desktop frame over top of the background image and have the screen scroll beneath or using JS to control the scrollbar a bit more to make the scroll from screen to screen seem more fluid, but I’m not too sure I’m going to restart this older project for now.