[SOLVED] Image with parallax effect on full screen page without scrollbars

Image with parallax effect on full screen page without scrollbars

My landing page needs to be 100vh / 100vw with no scrolling. The background is an image with a parallax effect so when the mouse moves the image moves.

I'm struggling to work out how to make it work. For the parallax image, I currently have:

min-height: 100vh;
min-width: 100vw;

The page is 100vh/100vw, as I need it to be. The problem is that when the image moves (on mouse move), it no longer covers the page. I need to make the image bigger so that it covers the entire page at all times, but I need to preserve a full screen page without scrollbars.

Here's a jsFiddle Demo of the problem.

Solution

Here's how to achieve the parallax scrolling effect while staying full page without scrollbars:

First, set the height of the body (or element containing the parallax image) to 100vh, and overflow: hidden;. This way you can maintain the 100vw/100vh size, while still having an element that is larger.

overflow:  hidden;
height: 100vh;

Now set the parallax image (.layer.layer-1) to take up the required amount of space. Also, set the top and left margin to a negative number and padding to a positive number so that the starting point of this element is outside of the viewport.

min-height: 200vh;
min-width: 200vw;
margin-top: -100px;
margin-left: -300px;
padding-top: 100px;

$('#scene').parallax();

body {
  height: 100vh;
  overflow: hidden;
  background-attachment: scroll !important;
  background-color: transparent;
  margin: 0;
}
#scene {
    transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    position: relative;
    z-index: -1;
    display: block;
    margin-bottom: 0px;
    padding-left: 0px;
    list-style: none;
    background-attachment: scroll;
}

.layer.layer-1 {
    transform: translate3d(-87.1px, -63.9px, 0px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    min-height: 200vh;
    min-width: 200vw;
    margin-top: -100px;
    margin-left: -300px;
    padding-top: 100px;
    background-image: url(http://uploads.webflow.com/5900af0a5f7f83692b682e4d/59468089c7312e4d8a190fa3_521477.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.layer.layer-2 {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-image: url(http://uploads.webflow.com/5900af0a5f7f83692b682e4d/5946831616c1f5436ec09e17_slice1.png);
    background-position: 50% 100%;
    background-size: cover;
    background-repeat: no-repeat;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/fjcsy7p5wuw8iij/jquery.parallax.js"></script>
<script src="https://daks2k3a4ib2z.cloudfront.net/5900af0a5f7f83692b682e4d/js/webflow.11254b67e.js"></script>

<body class="body">

<ul class="scene w-list-unstyled" id="scene" style="transform: translate3d(0px, 0px, 0px);transform-style: preserve-3d;backface-visibility: hidden;overflow: hidden;height: 100vh;">
<li class="layer layer-1" data-depth="1.00" style="position: relative; display: block; left: 0px; top: 0px; transform: translate3d(-78.5px, -55.7px, 0px); transform-style: preserve-3d; backface-visibility: hidden;"></li>
<li class="layer layer-2" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px); transform-style: preserve-3d; backface-visibility: hidden;"></li>
<li class="layer layer-3" data-depth="0.50" style="position: absolute; display: block; left: 0px; top: 0px; transform: translate3d(-39.25px, -27.85px, 0px); transform-style: preserve-3d; backface-visibility: hidden;"></li></ul>
</body>

Here's a jsFiddle to demonstrate.