Блог

Главная - Вопросы по программированию - Замаскированный текст, который заполняет прокрутку с помощью CSS?

Замаскированный текст, который заполняет прокрутку с помощью CSS?

#javascript #html #css #vue.js

#javascript #HTML #css #vue.js

Вопрос:

Я видел этот аккуратный пример, и мне было интересно, возможно ли это сделать в javascript / CSS?

В принципе, я вижу, что есть текст с экспериментальным CSS-свойством text-stroke, НО когда пользователь прокручивает его, текст имеет эффект заполнения, не как заполненный, а больше как эффект типа css-маски?

Это то, о чем я говорю.

https://i.imgur.com/cnvav7m.mp4

Как я могу добиться этого эффекта? Мне не нужно, чтобы вы писали всю логику, мне просто нужно, чтобы кто-нибудь объяснил мне, как они добились этого аккуратного эффекта??

Комментарии:

1. Распространенный способ подделать это — иметь два контейнера с идентичным содержимым, прокручиваемых одновременно и фиксированных в нужном положении, чтобы содержимое выстраивалось идеально, но они могут быть оформлены по отдельности.

Ответ №1:

Чтобы создать эффект параллакса, добавьте эти css-реквизиты в фоновое изображение:

 .my-background {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}