html - 带滚动的全屏 gif，像视差视频效果

Question

我正在尝试为网页制作视差效果。 在页面顶部，我希望全屏显示 gif。

Like this link

但我不希望它被修复。我希望它像平常一样滚动。 当我开始滚动时，无论 gif 的高度如何，它都需要立即剪掉。

我的问题是摆脱“固定”但保持相同的功能。

    #bg {
        position:fixed; 
        top:-50%; 
        left:-50%; 
        width:200%; 
        height:200%;
    }
    #bg img {
        position:absolute; 
        top:0; 
        left:0; 
        right:0; 
        bottom:0; 
        margin:auto; 
        min-width:50%;
        min-height:50%;
    }



<div id="bg">
    <img src="images/bg.jpg" alt="">
</div>

Answer 1

你是这个意思吗？你想让bg在页面顶部占100%高100%宽但不固定？

body {
  margin: 0;
  padding: 0;
}

.bg {
  width: 100%;
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2017/12/29/18/47/nature-3048299__340.jpg);
}

.spacer {
  height: 5000px;
}

<div class="bg"></div>
<div class="spacer"></div>