Parallax page with color changing text

I want to make a page with a big text across the screen and if you scroll, the background colors change (it could be done with images aswell)

I've tried a lot but i cant get it working...

code:

<!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>

it shows the text with image as background, but when you scroll the images stays, because its fixed i think.

But it should be the image staying and the background scrolling

Solution

To make the text somewhere constant on the page,you need fixed position which will force the element to stay always in a certain position

This fixed class always will force the text in the center.

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

Here you can see my solution : https://codepen.io/Cicek96/pen/qBdNVBO