I have a page with a parallax scrolling background that uses CSS only (plunkr) but I can't figure out a way to keep the background content strictly within the red boxes.
In short, I'm looking to achieve a similar effect as the scrolling background images as this one. Note that there are multiple pictures which are framed within each segment that scroll more slowly to emulate a 3D depth effect.
Now I know this is possible with JavaScript of course, but after pondering whether this could simply be achieved with some trick of of coordinate systems I found this example. Unfortunately the author didn't explain his work but the basic technique is to use transform: translateZ() to achieve the depth without the emulation hack and then playing tricks with the coordinate system of scrolling sections.
Here's the code from the plunkr;
<body>
<div class="slideWrapper">
<div id="slide1Img" class="slideImg"></div>
<div id="slide1" class="slide">
start is some text... end
<div class="footer">
footer text - picture should be based above this line
</div>
</div>
</div>
<div class="slideWrapper">
<div id="slide2Img" class="slideImg"></div>
<div id="slide2" class="slide">
start2 is some different text ...some end2
<div class="footer">
footer text - picture should be based above this line
</div>
</div>
</div>
</body>
with
html {
overflow: hidden; /* hide the normal page scrollbar */
}
body {
overflow-x: hidden;
overflow-y: scroll; /* this replaces the usual scrollbar we turned off but with 3d transforms */
-webkit-perspective: 1px;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: top;
}
.footer {
background-color: #eee;
border: 1px solid blue;
}
.slideWrapper {
position: relative; /* coord stop */
}
.slide {
font-size: 200%;
border: 1px solid red;
}
#slide1Img {
background-image: url("http://www.kennethprimrose.co.uk/wp-content/uploads/2011/06/Scottish-landscape..jpg");
-webkit-transform: translateZ(-1px) scale(2) translateY(0%);
}
#slide2Img {
background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSadcIZ_y-14V-Z5Q-nm843xz69GLr5glv19DZcjTQKjBcd7QC0");
-webkit-transform: translateZ(-1px) scale(2) translateY(50%); /* hack */
}
.slideImg {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background-position: 50% 50%;
background-size: cover;
}
There are two 'sections' defined by the red boxes, each with a footer. The images are supposed to move slowly on scroll within the red boxes but that's the closest I was able to get today.
I'm posting this question here in the hope that collectively the community may be able to take this solution further...
