Question

我正在尝试在我的网站上创建毛刺效果。我正在使用Scroll揭示插件来使效果在3秒标记处出现。毛刺部分有效，但无论我如何更改，高度都不会变化。我希望背景能覆盖整个屏幕，但是现在它已达到设定的高度，无论我做什么都不会改变。本质上，我希望我的页面从带有打字机效果的白色图形背景开始，并使用故障效果将带有WELCOME字样的黑色图形背景也转换为黑色图形背景。

我的HTML：

<body>
  <!-- HEADER -->
  <div id="msg"></div>
  <header>
          <div class="glitch" data-text="WELCOME">WELCOME</div>
          <a href="index.html"><i class="arrow fas fa-angle-double-  down"></i></a>
        </header>

我的CSS：

 body {
  background: url("background.png") no-repeat fixed center;
  background-size: 100%;
  width: 100%;
}

#msg {
  color: #000000;
  font-size: 40px;
  margin: 0 auto;
  padding-top: 30%;
  float: right;
  font-family: "Roboto Mono", monospace;
}

.header {
  width: 100%;
  height: 900px;
  background: url("background 2.png") no-repeat fixed center;
  background-size: 100%;
  z-index: 2;
  animation: example 1s;
  animation-iteration-count: 1;
}

@keyframes example {
  0% {
    background: url("background.png") no-repeat fixed center;
  }
  25% {
    background: grey;
  }
  50% {
    background: url("background.png") no-repeat fixed center;
  }
  100% {
    background: url("background.png") no-repeat fixed center;
  }
}

.glitch {
  position: relative;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  color: white;
  font-size: 250px;
  margin-top: 320px;
  text-align: center;
  }

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 5px;
  text-shadow: -1.5px 0 red !important;
  background: black;
  animation: glitch-anim-1 1.89s infinite linear alternate-reverse;
}

.glitch::after {
  left: -10px;
  text-shadow: -1.5px 0 rgb(89, 0, 255);
  background: black;
  animation: glitch-anim-2 1.8s infinite linear alternate-reverse;
  }

@keyframes glitch-anim-1 {
  0% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  10% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  20% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  30% {
    clip: rect(50px, 1500px, 400px, 0);
  }
  40% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  50% {
    clip: rect(300px, 1500px, 65px, 0);
  }
  60% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  70% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  80% {
    clip: rect(200px, 1500px, 30px, 0);
  }
  90% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  100% {
    clip: rect(600px, 1500px, 50px, 0);
  }
 }

@keyframes glitch-anim-2 {
  0% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  10% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  20% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  30% {
    clip: rect(50px, 1500px, 400px, 0);
  }
  40% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  50% {
    clip: rect(300px, 1500px, 65px, 0);
  }
  60% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  70% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  80% {
    clip: rect(200px, 1500px, 30px, 0);
  }
  90% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  100% {
    clip: rect(600px, 1500px, 50px, 0);
  }
 }

.arrow {
   color: #ffffff;
   font-size: 80px;
   margin-top: 4%;
   margin-left: 50%;
 }

我的JS：

//TYPEWRITER EFFECT
var msg = document.getElementById("msg");

var typewriter = new Typewriter(msg, {
  loop: false
});

typewriter
  .typeString("hello.")
  .pauseFor(200)
  .deleteAll()
  .typeString("my name is Nasya")
  .pauseFor(500)
  .deleteAll()
  .start();


// -------------
// TRANSITIONS
// -------------

ScrollReveal().reveal("header", {
  delay: 3000
});

ScrollReveal().reveal(".glitch", {
  delay: 4000
});

ScrollReveal().reveal(".arrow", {
  delay: 8000,
  distance: "-50px"
});

小故障效果和div背景不起作用

0 个答案: