html – 使用视差背景制作动画文本

2019年8月6日 164次阅读

我是新手,我有这个网站,我正在用它来学习基础知识.我只是将一个简单的视差滚动效果组合在一起,其中标题滚动并包含一个H1元素.

我一直试图弄清楚是否可以在文本上放置一些滚动动画,以便文本的行为类似于DevTips的视频中的图像：https://www.youtube.com/watch?v=WTZpNAbz3jg&feature=player_detailpage

我确实尝试将一些jQuery放在一起以针对H1并使用视频中显示的相同技术,但它不起作用.也许我的代码都错了,因为他在控制台中打印出滚动位置的测试没有显示给我.

这是我正在使用的html和css代码.不幸的是,我不能添加截图,因为我是新来的,缺乏积分.

谢谢你！

HTML

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Parallax</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="masthead">
        <h1>Some Text</h1>
    </div>

    <div class="page"></div>

    <script src="jquery-2.1.3.js"></script>
    <script src="function.js"></script>
  </body>
</html>

CSS

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0px;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

body {
  overflow-y: auto;
  font-size: 120%;
  perspective: 1px;
  transform-style: preserve-3d;
}

h1 {
  color: #fff;
  font-size: 300%;
  text-align: center;
  padding-top: 200px;
}

.page {
  padding: 20px 20%;
  position: relative;
  top: 60%;
  background-color: #fff;
  height: 900px;
}

.masthead {
  position: absolute;
  background: url("000017.jpg");
  width: 100%;
  height: 60%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  transform: translateZ(-0.9px) scale(1.9);
  z-index: -900;
  top: -20%;
}

最佳答案 你的代码似乎工作得很好！

然而,效果不是很明显(但就个人而言,我更喜欢离散效果).查看整页中的snipppet.

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0px;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

body {
  overflow-y: auto;
  font-size: 120%;
  perspective: 1px;
  transform-style: preserve-3d;
}

h1 {
  color: #fff;
  font-size: 300%;
  text-align: center;
  padding-top: 200px;
}

.page {
  padding: 20px 20%;
  position: relative;
  top: 60%;
  background-color: #fff;
  height: 900px;
}

.masthead {
  position: absolute;
  background: url("http://placehold.it/800x600/00ffff/66ffff&text=background") #55ffff;
  width: 100%;
  height: 60%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  transform: translateZ(-0.9px) scale(1.9);
  z-index: -900;
  top: -20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Parallax</title>
  </head>
  <body>
    <div class="masthead">
        <h1>Some Text</h1>
    </div>

    <div class="page"></div>

  </body>
</html>
点赞