Hi there,
I’m having two weird issues with a really niche layout. My client wants a fullscreen slider, where each individual slide can be scrolled for more content below the fold.
Codepen: http://codepen.io/tkaragianes/pen/WQqMWv?editors=100
Problem 1) The codepen initially shows the desired behavior (the skewed segment slides over the intro segment, and reveals the results segment). Clicking transform adds a 3D transform to the segments that is the equivalent of setting that slide to the active slide. The position: fixed that enables the intro and results segments fail, and the skew introduces a large whitespace gap. Is there an alternative way to accomplish fixed full-screen background images?
Problem 2) When the skewed section is in the viewport, you should be able to see the top corner of the intro section, and bottom corner of the results section. I’ve currently got it close, by positioning each in half their respective halves of the screen. However background-size: cover results in a jump when it resizes from 50vh to 100vh. Can anyone think of a way to avoid that jump? (Clicking the opacity button fades the skewed element so it’s easier to see the jump)
