How do I make parallax work below the viewport only?

programming web dev
1

So I got parallax working on 7 image layers that make a city, but it only displays at the top of the site when I need it to be in a DIV just above the footer

How do I achieve this? Can anyone tell me what I’m doing wrong please?

<style type="text/css">
#parallax {
  height: 100% !important; /* MAY HAVE TO USE A PIXEL NUMBER */
  height: 100vh !important;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: -1 !important;
}
.plx_group {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  height: 100vh !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: hidden; /* IMPORTANT TO KEEP LAYER IMGS BEHIND THE FOOTER (NOT ON TOP OF THE FOOTER) */
}
.plx_layer {
  width: 100%;
  height: 800px !important; /* FALLBACK FOR OLDER BROWSERS */
  height: 100vh !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background-position: bottom center;
  background-size: 100% auto; /* STRETCHES WIDTH TO BE RESPONSIVE FOR SCREEN SIZE */
  background-repeat: no-repeat;
}
.layer1 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer1.png");
  z-index: 1;
}
.layer2 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer2.png");
  z-index: 2;
}
.layer3 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer3.png");
  z-index: 3;
}
.layer4 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer4.png");
  z-index: 4;
}
.layer5 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer5.png"); 
  z-index: 5;  
}
.layer6 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer6.png");  
  z-index: 6;
}
</style>

<div id="parallax" class="plx_group">
    <div class="plx_layer layer1"></div>
    <div class="plx_layer layer2"></div>
    <div class="plx_layer layer3"></div>
    <div class="plx_layer layer4"></div>
    <div class="plx_layer layer5"></div>
    <div class="plx_layer layer6"></div>
    <div class="plx_layer layer7"></div>
</div>

<script type="text/javascript">

var layer1 = document.querySelector(".layer1");
var layer2 = document.querySelector(".layer2");
var layer3 = document.querySelector(".layer3");
var layer4 = document.querySelector(".layer4");
var layer5 = document.querySelector(".layer5");
var layer6 = document.querySelector(".layer6");

function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}

window.addEventListener("DOMContentLoaded", scrollLoop, false);

var xScrollPosition;
var yScrollPosition;

function scrollLoop() {
    xScrollPosition = window.scrollX;
    yScrollPosition = window.scrollY;

    setTranslate(0, yScrollPosition * -1.6, layer1);
    setTranslate(0, yScrollPosition * -1.5, layer2);
    setTranslate(0, yScrollPosition * -1.4, layer3);
    setTranslate(0, yScrollPosition * -1.3, layer4);
    setTranslate(0, yScrollPosition * -1.2, layer5);
    setTranslate(0, yScrollPosition * -1.1, layer6);

    requestAnimationFrame(scrollLoop);
}
</script>
2

I’m trying to figure out how to make it work where I’m placing the DIV just above the FOOTER and making the parallax effect only happen when I scroll down to when the images are actually in the VIEWPORT.

Is there a way to do this without a plugin or using jQuery?

3

100vh is based on the viewport height, so you might want to use something else there… or, just remove it, since you have heights defined before that get overridden with that value. Note too, that your #parallax and .plx_group are the same objects so there’s redundancy there as well.

Basically, place your #parallax div where you want it to be and position everything inside of it relative to that div. What seems to be messing you up there is the vh units and the fixed position. Use absolute positioning for your layers instead.

4

Hey Senocular,

Thanks for the response. I made the appropriate changes, but it’s still showing up at the top of the page… The #parallax div is supposed to be just above the footer, but its showing up at the top of the page when I set the images to fixed, and nothing shows anywhere if they are set to absolute…

if I apply #parallax -> relative, .plx_layer -> fixed, and no position to the individual imgs, then the imgs are spread out from top to bottom across the entire page.

I’m at the point where I’m just trying to find someone to paypal money to fix this for me…

<style type="text/css">
#parallax {
  width: 100% !important;
  height: 800px !important;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
.plx_layer {
  width: 100%;
  height: 800px !important;
  background-position: bottom center;
  background-size: 100% auto; /* STRETCHES WIDTH TO BE RESPONSIVE FOR SCREEN SIZE */
  background-repeat: no-repeat;
  position: fixed;
}
.layer1 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer1.png");
  z-index: 1;
}
.layer2 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer2.png");
  z-index: 2;
}
.layer3 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer3.png");
  z-index: 3;
}
.layer4 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer4.png");
  z-index: 4;
}
.layer5 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer5.png");
  z-index: 5;
  }
.layer6 {
  background-image: url("/wp-content/themes/bootstrap_theme/assets/parallax/images/layer6.png");
  z-index: 6;
}
</style>

<div id="parallax">
    <div class="plx_layer layer1"></div>
    <div class="plx_layer layer2"></div>
    <div class="plx_layer layer3"></div>
    <div class="plx_layer layer4"></div>
    <div class="plx_layer layer5"></div>
    <div class="plx_layer layer6"></div>
</div>

(javascript is the same)

5

You’re still using fixed there

6

When I have position set to absolute or nothing at all for either the .plx_layer or the individual imgs, nothing shows up at all…

7

You’re probably translating it out of view by then. You may have to adjust your transform Y to also offset by the offsetTop of the parallax element.

8

are there people available for hire on this site then? That’s out of my scope of what I can do right now.

9

Here’s a fiddle

https://jsfiddle.net/518zrwwx/

10

Its usually not hard to find a library that does this stuff a little more automatically. Parallax is a pretty popular behavior and I’m sure there are libraries/tools out there that make it easy.

11

Oh I see what you added. Thanks so much!

There’s still a gap between the footer and the parallax div that is always getting bigger or smaller depending on the scroll, but I think I can figure it out. I’m trying to make the last img stay right on top of the footer and the other 5 images above move up and down accordingly…

12

It looks like it might be derived from Kirupa’s tutorial?

Or something found elsewhere which is very similar.

13

Yeah, which is great for DIY. But if you’re looking to just get the behavior with minimal effort, then you might want to look into something like (me and my lacking googling skills…) https://codecanyon.net/item/the-parallaxer-wp-parallax-effects-on-content/9594931 or something like that where it is more drop in some code and set a few parameters here and there.