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

css html

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

分享至

字體一直顯示在網頁上方，要怎麼做才可以像該網站一樣有背景色及字體在下方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;
}

YC iT邦好手 1 級 ‧ 2024-04-26 13:44:43 檢舉

我只注意到你少一個</div>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

iT邦好手 1 級 ‧ 2024-04-26 18:50:46

參考看看

回應 1
分享
檢舉

crazymonkey iT邦新手 5 級 ‧ 2024-04-26 18:52:36 檢舉

喔原來如此，謝謝您的幫助，這回答對我來說意義很重大，謝謝

登入發表回應

w315899212

iT邦新手 5 級 ‧ 2024-05-07 12:35:07

@media screen and (max-width: 768px) {
  section {
    transform: translateY(120vh);
  }
}

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22217 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

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

2 個回答

我要發表回答

標記使用者