带有变色文本的视差页面

Question

我想制作一个屏幕上有大文本的页面，如果滚动，背景颜色会改变（也可以用图像来完成）

我已经尝试了很多，但我无法让它工作...

代码：

<!DOCTYPE html>
<head>
    <title>testhtml</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html, body{
            height: 100%;
        }
        .parallax{

            background-image: url(../assets/img/img1.jpg);
            min-height: 100%;
            height: 100%;
            position: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-clip: text;
        }
        .title { 
            overflow:hidden;
            display:inline-block; 
            padding:10px; 
            font-weight:bold;
            font-family:arial;
            color:transparent;
            font-size:200px;
        }span { 
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            display:block;
        }

    </style>
</head>
<body>

    <div class="parallax">
                <h1 class="title"><span>Test</span></h1>

    </div>
</body>

它显示带有图像作为背景的文本，但是当您滚动图像时，图像会保留，因为我认为它是固定的。

但应该是图片停留，背景滚动

Answer 1

要使文本在页面上的某处保持不变，您需要固定位置，这将强制元素始终保持在某个位置

此固定 class 总是会强制文本居中。

.fixed {
    position:fixed;
      top:40%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align: center;
}

在这里你可以看到我的解决方案：https://codepen.io/Cicek96/pen/qBdNVBO

带有变色文本的视差页面

Parallax page with color changing text

html

css

parallax

styling