javascripthtmlcssparallax.js

Scaling in parallax.js

As part of a web project I'm making, I'm using the parallax.js library. What I am trying to do is have an image fill up the entire viewport, and when the user moves around their mouse, the image moves too in response.

I initially tried using an img element, and it mostly worked okay. I had to do some tricks in order to get it centered. The big problem however was that it doesn't scale properly. If I opened the page on my phone, or if I maximized it in my ultrawide monitor, you could see the background around the image. 

<style>
.container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scene {
    width: 100%;
    height: 100%;
}

.layer {
    width: 100%;
    height: 100%;
}

img {
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: -3%;
    width: 130%;
    height: auto;
}
</style>   

<body>
<div class="container">
            <div class="panel">
                <div class="scene">
                    <div class="layer" data-depth="1.00"><img src="https://static.giantbomb.com/uploads/original/13/137381/2859027-borderlands-lg.jpg"></div>
                </div>
            </div>
        </div>
</body>

I tried using media queries to toggle between width:auto and height:auto in css to somehow get it to scale, but it wasn't working out. After some google searching, I came across background-size: cover, which basically does exactly what I want. However, when I switched out the img for a div with a background image, another problem arose. No matter how zoomed in (read: how much larger than the viewport), the div with the image is, it gets cut off at the viewport borders. This means that whenever the user moves their mouse in the slightest, the background is visible. 

<style>
.panel {
    width: 100vw;
    height: 100vh;
    overflow:hidden;
}

.scene, .layer{
    width: 100%;
    height: 100%;
    overflow:hidden;
}

.parallaximg {
    background-image: url("https://static.giantbomb.com/uploads/original/13/137381/2859027-borderlands-lg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow:hidden;
    width:120%;
    height:120%;
        margin-left: 50%;
    transform: translateX(-50%);
}
</style>

<body>
    <div class="wrapper">
        <div class="panel">
            <div class="scene">
                <div class="layer" data-depth="1.00"><div class="parallaximg"></div></div>
            </div>
        </div>
    </div>
</body>

The JS script for both examples is the same (requires JQuery and parallax.js):

var scene = $(".scene")[0];
var parallax = new Parallax(scene, {
    scalarX: 4,
    scalarY: 4
});

Is there some way to get it to work? If not, how would I go about getting the img version to scale properly on all aspect ratios?

Here are two examples I made for clarity:

Solution

  • In the end, absolute positioning using the following class did the trick:

    .center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}