我是新手，我有这个网站可以用来学习基础知识。我只是组合了一个简单的视差滚动效果，其中标题滚动并包含一个 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%;
}
最佳答案
您的代码似乎运行良好! 然而，效果不是很明显(但就个人而言，我更喜欢离散效果)。查看整页的代码段。
*, *::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>关于html - 具有视差背景的动画文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29736618/