視差滾動的CSS將字體移至下方

css html

crazymonkey 2024-04-26 10:52:30 ‧ 447 瀏覽

分享至

字體一直顯示在網頁上方，要怎麼做才可以像該網站一樣有背景色及字體在下方https://www.firewatchgame.com/

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="page">
    <div class="keyart" id="parallax">
      <div class="keyart_layer" id="keyart-8"></div>
      <div class="keyart_layer" id="keyart-7"></div>
      <div class="keyart_layer" id="keyart-6"></div>
      <div class="keyart_layer" id="keyart-5"></div>
      <div class="keyart_layer" id="keyart-4"></div>
      <div class="keyart_layer" id="keyart-3"></div>
      <div class="keyart_layer" id="keyart-2"></div>
      <div class="keyart_layer" id="keyart-1"></div>
      <div class="keyart_layer" id="keyart-0"></div>
      <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse facilis unde illo neque at hic quisquam, nulla consectetur, itaque maxime sit iusto aliquam culpa </section>
    </div>
</body>
</html>

CSS:


body {
  margin: 0;
  font-family:Helvetica,Sans-serif;
  overflow-x:hidden;
}

.page {
  width:100vw;
  height:100vh;
  perspective:1px;
 
  overflow-x:hidden;
}

#parallax {
  transform-style: preserve-3d;
  height:120vh;
}

.keyart_layer {
	background-position: bottom center;
	background-size: cover;
	background-repeat: repeat-x;
	position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

#keyart-0 {
  background-image: url('https://www.firewatchgame.com/images/parallax/parallax0.png');
  background-color: #ffaf1b;
  transform:translate3d(-11px,-46px,-1.3px) scale(2.3);
}
#keyart-1 {
  background-image: url('http://www.firewatchgame.com/images/parallax/parallax1.png');
  transform:translate3d(0,-47px,-.7px) scale(1.7);
}
#keyart-2 {
  background-image: url('http://www.firewatchgame.com/images/parallax/parallax2.png');
  transform:translate3d(0,-98px,-.4px) scale(1.6);
}
#keyart-3 {
  background-image: url('http://www.firewatchgame.com/images/parallax/parallax3.png');
  transform:translate3d(0,-2px,-.1px) scale(1.1);
}
#keyart-4 {
  background-image: url('http://www.firewatchgame.com/images/parallax/parallax4.png');
  transform:translate3d(0,35px,.1px) scale(.9);
}
#keyart-5 {
  background-image: url('http://www.firewatchgame.com/images/parallax/parallax5.png');
  transform:translate3d(0,84px,.2px) scale(.8);
}
#keyart-6 {
  background-image: url('http://www.firewatchgame.com/images/parallax/parallax6.png');
  transform:translate3d(0, 106px,.3px) scale(.7);
}
#keyart-7 {
  background-image: url('http://www.firewatchgame.com/images/parallax/parallax7.png');
  transform:translate3d(0,106px,.38px) scale(.65);
}
#keyart-8 {
  background-image: url('https://www.firewatchgame.com/images/parallax/parallax8.png');
  transform:translate3d(0, 180px,.45px) scale(.8);
}
section {
  font-size: 2rem;
  padding: 2rem;
  background-color: #333;
  color: white;
}