具有视差背景的动画文本答案

【问题标题】：Animating Text with parallax background具有视差背景的动画文本
【发布时间】：2015-04-19 22:26:54
【问题描述】：

我是新手，我有这个网站用来学习基础知识。我只是将一个简单的视差滚动效果放在一起，其中标题滚动并包含一个 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%;
}

【问题讨论】：

标签： html css parallax

【解决方案1】：

您的代码似乎运行良好！然而，效果不是很明显（但就个人而言，我更喜欢离散效果）。查看整页的代码片段。

*, *::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>

【讨论】：