Streaming live at 10am (PST)

Half fixed Half Scroll Website

#1

Hello, I was hoping someone could help me with how I might achieve this layout which I have attached.

Basically a full width 50/50 split of web browser, one side images that rotate (fade) once the user hits the new section.

I have currently tried out two divs side by side with content in the text div that scrolls fine with the overflow function whilst the image div stays put. So basically one div will have continuos sections of text and the other div needs to swap out once each section is hit.

Thanks

#2

I would consider the right section as the page, with a left padding or margin of 50%. So body, then the section containing everything on the right.

Then build a position:fixed 50/100vh section on the right, when I’d pile up all the images. All the images would have a .image classe in common, then a different combo each (.im1, .im2…). All the images except the first one would be opacity 0%, and the container would have a black background.

Then using IX2, have an interaction set on each section, with the “when scroll into view” trigger. The IX would do this: Fade out all the images (so only current image would fade out actually), then fade-in the image related to the section.

#3

Perfect will give it a try.

Thanks Vincent.

#4

@Vincent

Hey thanks again that worked perfectly.

Cheers

1 Like
#5

Thanks for coming back and reporting :slight_smile: Great that it works!