Avoiding overflow of background images behind a frame

[dombre77]

Hello, first thanks for this great parallax. I have 4 images behind each other - the first image in front is a frame. While moving the mouse the inner background images flow over the limits of the front.

<div class="container-fluid parallax">
    <div class="row">
        <div id="scene">
            <div data-depth="0.7"><img src="img/layer_04.png" /></div>
            <div data-depth="0.8"><img src="img/layer_03.png" /></div>
            <div data-depth="0.9"><img src="img/layer_02.png" /></div>
            <div data-depth="1.0"><img src="img/layer_01.png" /></div>
        </div>
    </div>
</div>

What would be the best practice to avoid this?

Regards & have a nice Christmas Dom

[dombre77]

Hello,

I found the solution below with margins left and right while also using data-limits:

<div class="header-main">
    <div class="container-fluid no-overflow">
        <div class="row header-row">
            <ul id="scene" class="scene unselectable" data-limit-x="160" data-limit-y="160">
                <li class="layer" data-depth="0.7"><img src="img/layer_04.png"/></li>
                <li class="layer" data-depth="0.8"><img src="img/layer_03.png"/></li>
                <li class="layer" data-depth="0.9"><img src="img/layer_02.png"/></li>
                <li class="layer" data-depth="1.0"><img src="img/layer_01.png"/></li>
            </ul>
        </div>
    </div>
</div>

CSS:

.wrapper {
    padding: 0;
    margin: 0;
}

.scene,
.layer {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.scene {
    min-height: 460px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

ul li.layer img {
    width: 100%;
}

.header-row {
    margin-left: -160px;
    margin-right: -160px;
}

.no-overflow {
    overflow: hidden;
}

.layer img {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

Unfortunately the parallax is not working on iOS 13. Any hints?

Regards, Dom

[dombre77]

Found the solution here: Parallax with gyroscope not working on mobile #268... I need ngrok