Javascript 如何修复云层上升？

我有一个云图像，它应该在用户向下滚动时上升，但它被剪裁在底部，因此看起来很难看。形象本身是好的。在我看来，我必须以某种方式改变CSS。我怎样才能解决这个问题

这是沙箱

HTML

<canvas id="canvas"></canvas>
<div class="front" id="front">
  <div class="cloud">
    <div class="scroll-arrows">
      SCROLL TO MOVE THE CLOUD
    </div>
  </div>
</div>

JS

body {
  height: 1000vh;
  margin: 0;
}

canvas {
  width: 100%;
  height: 100vh;
  position: fixed;
}

.front {
  text-align: center;
  background: url("https://res.cloudinary.com/active-bridge/image/upload/v1448008261/cloud.png") no-repeat 50% 50%/cover;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 14px;
  z-index: 1;
  line-height: 100vh;
}

.front .cloud {
  display: inline-block;
  width: 40%;
  line-height: 1;
  vertical-align: middle;
}

front = document.getElementById('front');

var timeOut;
window.onresize = function() {
  if(timeOut)
    clearTimeout(timeOut);
  timeOut = setTimeout(draw, 10);
}

window.onload = draw;
window.onscroll = navigate;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

forest = new Image;
forest.src = 'http://p1.pichost.me/i/33/1561150.jpg';

function navigate() { draw() }

function draw(scroll) {
  scroll = (window.scrollY || window.pageYOffset) / (document.body.clientHeight - window.innerHeight) * 3000;
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);


drawImageProp(ctx, forest, 0, (-scroll*3.9)/4, canvas.width, canvas.height + (scroll*3.9)/2);

}

function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }

    // default offset is center
    offsetX = typeof offsetX === "number" ? offsetX : 0.5;
    offsetY = typeof offsetY === "number" ? offsetY : 0.5;

    // keep bounds [0.0, 1.0]
    if (offsetX < 0) offsetX = 0;
    if (offsetY < 0) offsetY = 0;
    if (offsetX > 1) offsetX = 1;
    if (offsetY > 1) offsetY = 1;


    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,   // new prop. width
        nh = ih * r,   // new prop. height
        cx, cy, cw, ch, ar = 1;

    // decide which gap to fill
    if (nw < w) ar = w / nw;
    if (nh < h) ar = h / nh;
    nw *= ar;
    nh *= ar;

    // calc source rectangle
    cw = iw / (nw / w);
    ch = ih / (nh / h);

    cx = (iw - cw) * offsetX;
    cy = (ih - ch) * offsetY;

    // make sure source rectangle is valid
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    // fill image in dest. rectangle
    ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);

}

front=document.getElementById（'front'）；
var超时；
window.onresize=函数（）{
如果（超时）
clearTimeout（超时）；
超时=设置超时（绘图，10）；
}
window.onload=draw；
window.onscroll=导航；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
森林=新形象；
forest.src=http://p1.pichost.me/i/33/1561150.jpg';
函数导航（）{draw（）}
功能绘图（滚动）{
滚动=（window.scrollY | | window.pageYOffset）/（document.body.clientHeight-window.innerHeight）*3000；
canvas.setAttribute（'width'，window.innerWidth）；
canvas.setAttribute（'height'，window.innerHeight）；
drawImageProp（ctx，森林，0，（-scroll*3.9）/4，canvas.width，canvas.height+（scroll*3.9）/2）；
}
函数drawImageProp（ctx、img、x、y、w、h、offsetX、offsetY）{
if（arguments.length==2）{
x=y=0；
w=ctx.canvas.width；
h=ctx.canvas.height；
}
//默认偏移量为“中心”
offsetX=offsetX的类型==“编号”？offsetX:0.5；
offsetY=typeof offsetY==“number”？offsetY:0.5；
//保持界限[0.0,1.0]
如果（offsetX<0）offsetX=0；
如果（偏移量<0）偏移量=0；
如果（offsetX>1）offsetX=1；
如果（offsetY>1）offsetY=1；
var iw=img.width，
ih=img.高度，
r=数学最小值（w/iw，h/ih），
nw=iw*r，//新道具宽度
nh=ih*r，//新道具高度
cx，cy，cw，ch，ar=1；
//决定填补哪个空白
如果（nwiw）cw=iw；
如果（ch>ih）ch=ih；
//在目标矩形中填充图像
ctx.drawImage（img、cx、cy、cw、ch、x、y、w、h）；
}

给出

.front

div a设置高度解决了问题，而不是

位置：绝对

代码

---

未加载图像codepen@r2_d2它已加载，请稍等片刻。只需删除

绝对值
定位前部
。前部
并给它一个固定高度，它就不会被剪辑。这是您想要的还是您需要将其定位为绝对值的原因。@AntonioSmoljan it解决了这个问题。创建一个答案，以便我可以接受它
.front {
  text-align: center;
  background: url("https://res.cloudinary.com/active-bridge/image/upload/v1448008261/cloud.png") no-repeat 50% 50%/cover;
  pointer-events: none;
  height: 850px;
  position: relative;
  font-size: 14px;
  z-index: 1;
  line-height: 100vh;
}