0

This is an example of the effect I'm trying to acheive only without using images.

I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.

So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?

Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.

Thanks for all help in advance!

Sam
  • 6,414
  • 11
  • 46
  • 61

0 Answers0