Страница параллакса с изменяющим цвет текстом - PullRequest
Новая
       101

Страница параллакса с изменяющим цвет текстом

0 голосов
/ 18 февраля 2020

Я хочу сделать страницу с большим текстом по всему экрану, и если вы прокрутите, цвета фона изменятся (это можно сделать и с изображениями)

Я много пробовал, но не могу получить это работает ...

код: 

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

показывает текст с изображением в качестве фона, но когда вы прокручиваете изображения, он остается, потому что он исправлен, я думаю.

Но это должно быть изображение и прокрутка фона

1 Ответ

0 голосов
/ 18 февраля 2020

Чтобы сделать текст где-то постоянным на странице, вам нужна фиксированная позиция, которая заставит элемент всегда оставаться в определенной позиции

Этот фиксированный класс всегда будет заставлять текст в центре. 

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

Здесь вы можете увидеть мое решение: https://codepen.io/Cicek96/pen/qBdNVBO

...