Question

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

Answer 1

您的代码似乎运行良好！然而，效果不是很明显（但就个人而言，我更喜欢离散效果）。请查看整页中的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>

动画文本与视差背景

1 个答案: