上面没有显示标题 Canvas

Question

我几个月前创建了我的作品集，一切正常。大约半年后，我再次打开代码，现在它不再正常工作了。我让文本显示在 canvas 和 scrollmagic.js 上方，看着它在检查器中展开它似乎仍然有效 （因为不透明度是仍在变化） 但它没有变得可见。我在 Safari 和 Chrome.

中都试过了

我会把部分代码放在这里，我认为可能与这个错误有关。

<section id="wrapper">
    <canvas class="canvasScreen intro">
      <h1 class="hideit hello"><span class="head1">Dream.</span><span class="head2">Create.</span></h1>
      
      <h1 class="showme">Hi, I'm XXX. <br/>
      Media & Interaction Design Student. <br/>
      I want to dream new interesting ideas and create fascinating tech.
      </h1>
      <div class="hideit container">
        <div class="chevron"></div>
        <div class="chevron"></div>
        <div class="chevron"></div>
        </div>
      </canvas>
    </section>

我添加了 Wrapper 以期修复它，但那样我就不会在这里了 :) 我也尝试添加 z-index 无济于事。

.canvasScreen{
  z-index: -1;
  height: 100vh !important;
  width: 100vw !important;
}


.hello{
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 10vw;
    color: white;
    text-decoration: none;
}

.showme{
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 1.5vw;
  color: white;
  text-decoration: none;
  padding: 0;
  opacity: 0;
}

#wrapper{
  min-height: 350vh;

}

如果有必要（因为它似乎有效）：

//TEXTANIMATION
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});

const scene2 = new ScrollMagic.Scene({
    triggerElement: wrapper,
    triggerHook: 0,
    duration: 800,
})
.setTween(textAnim)
.addTo(controller)

遗憾的是我没有收到任何错误代码。有人有想法吗？

Answer 1

我将文本移出了 HTML 中的 Canvas。现在它像以前一样工作了。

<section id="wrapper">
    <canvas class="canvasScreen intro">
      </canvas>
      <h1 class="hideit hello"><span class="head1">Dream.</span><span class="head2">Create.</span></h1>
      
      <h1 class="showme">Hi, I'm XXX. <br/>
      Media & Interaction Design Student. <br/>
      I want to dream new interesting ideas and create fascinating tech.
      </h1>
      <div class="hideit container">
        <div class="chevron"></div>
        <div class="chevron"></div>
        <div class="chevron"></div>
        </div>
    </section>

仍然无法真正解释为什么它以前有效，但至少它再次有效。希望它对以后的其他人有所帮助:)

上面没有显示标题 Canvas

Headline not showing above Canvas

javascript

html

css

scrollmagic