Image with parallax effect on full screen page without scrollbars

Question

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.

@ChavaG You are right. I think i misread and thought the website linked was an example of what he wanted to achieve. Will remove my comment! — puelo, Jun 26 '17 at 22:35

score 2 · Answer 1 · answered Jun 26 '17 at 21:14

2

You can set background-size: 200% or 300% to have it as large as you wish.

answered Jun 26 '17 at 21:14

MullerA

367
1
3
13

This will scale the background image but the element itself will still be the same size. It won't achieve the effect @James Bimson is looking for. – Chava Geldzahler Jun 26 '17 at 22:25

score 0 · Answer 2 · answered Jun 26 '17 at 21:10

0

Have you tried setting the margins of the background div to a negative number, and the padding to a positive number? This will allow the background image to "overflow" over its div.

answered Jun 26 '17 at 21:10

J. Chen

367
1
7

Miguel Mota · Answer 3 · 2017-06-26T21:23:25.350

0

One way is to use scale if using an img tag:

img {
  transform: scale(2);
}

JSFiddle Demo: https://jsfiddle.net/9hej5acL/1/

If using background-image then you can use background-size to scale the image:

body {
  background-image: url('http://example.com/image.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200% auto;
}

JSFiddle Demo: https://jsfiddle.net/4cw7qx2o/1/

edited Jun 26 '17 at 21:23

answered Jun 26 '17 at 21:16

Miguel Mota

20,135
5
45
64

This will scale the background image, but the element itself will still be the same size. It won't achieve the parallax scrolling effect that @James Bimson is looking for. – Chava Geldzahler Jun 26 '17 at 22:27

Chava Geldzahler · Accepted Answer · 2017-06-30T00:55:18.217

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.

Thank you so much :) You was the only one to even have a clue how I wanted it to be! I still have a few issues I need to address mostly to do with the mobile version. I'm going to make individual layers for the different mobile versions as I need to make the images scale better also they bounce of the div. — James Bimson, Jun 27 '17 at 22:09

Image with parallax effect on full screen page without scrollbars

4 Answers4

Linked