在没有滚动条的全屏页面上具有视差效果的图像

Question

我的着陆页需要是 100vh / 100vw 并且没有滚动。背景是具有视差效果的图像，因此当鼠标移动时，图像也会移动。

我正在努力弄清楚如何让它发挥作用。对于视差图像，我目前有：

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

页面是 100vh/100vw，我需要它。问题是当图像移动时（鼠标移动），它不再覆盖页面。我需要使图像更大，以便它始终覆盖整个页面，但我需要保留没有滚动条的全屏页面。

这是一个 jsFiddle Demo 的问题。

Answer 1

您是否尝试过将背景的边距 div 设置为负数，将内边距设置为正数？这将允许背景图像 "overflow" 覆盖其 div。

Answer 2

您可以设置 background-size: 200% 或 300% 使其尽可能大。

Answer 3

如果使用 img 标签，一种方法是使用 scale：

img {
  transform: scale(2);
}

JSFiddle 演示：https://jsfiddle.net/9hej5acL/1/

如果使用 background-image 则可以使用 background-size 缩放图像：

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

JSFiddle 演示：https://jsfiddle.net/4cw7qx2o/1/

Answer 4

以下是在没有滚动条的情况下保持整页的同时实现视差滚动效果的方法：

首先，将正文（或包含视差图像的元素）的高度设置为 100vh，然后 overflow: hidden;。这样您就可以保持 100vw/100vh 大小，同时仍然有一个更大的元素。

overflow:  hidden;
height: 100vh;

现在设置视差图像(.layer.layer-1)以占用所需的space数量。此外，将上边距和左边距设置为负数并将填充设置为正数，以便此元素的起点位于视口之外。

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>

这里有一个jsFiddle来演示。

在没有滚动条的全屏页面上具有视差效果的图像

Image with parallax effect on full screen page without scrollbars

html

css

jquery

parallax

parallax.js