Эффект заполнения текста, но контролируется в процентах

Я пытаюсь создать эффект заливки текста, который будет контролироваться useState. У меня есть следующий текст:

По состоянию я хочу, чтобы оно заполнялось слева направо, хотя последняя буква из первого текста будет другого цвета, например:

Следующий код вроде бы работает наполовину, но заливка не синхронизирована и не разными цветами:

'use client'

import React, { useState } from 'react'

const Intro = () => {
  const [percentage, setPercentage] = useState(0)

  // Function to dynamically create the gradient based on percentage
  const getGradient = (percentage) => {
    return `linear-gradient(to right, white ${percentage}%, transparent ${percentage}%)`
  }

  return (
    <div className = "w-full h-[100vh] flex items-center justify-center">
      <div className = "flex flex-col">
        <div>
          <span
            className = "text-transparent italic text-[148px] text-stroke"
            style = {{
              lineHeight: 0.8,
              backgroundImage: getGradient(percentage),
              WebkitBackgroundClip: 'text',
              backgroundClip: 'text',
            }}
          >
            PO
          </span>
          <span
            className = "text-transparent italic pr-2 text-[148px] text-stroke"
            style = {{
              lineHeight: 0.8,
              backgroundImage: getGradient(percentage),
              WebkitBackgroundClip: 'text',
              backgroundClip: 'text',
            }}
          >
            S
          </span>
        </div>
        <span
          className = "text-transparent text-[30px] italic text-stroke-less"
          style = {{
            lineHeight: 1,
            letterSpacing: 5.7,
            marginLeft: 6,
            backgroundImage: getGradient(percentage),
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
          }}
        >
          PERFORMANCE
        </span>
      </div>
      <input
        type = "range"
        min = "0"
        max = "100"
        value = {percentage}
        onChange = {(e) => setPercentage(e.target.value)}
        className = "mt-4"
      />
    </div>
  )
}

export default Intro

Я не совсем понимаю, что значит «заливка не синхронизирована». Не могли бы вы объяснить немного больше, какой эффект вы хотите? С чем синхронизировать заливку?

A Haworth 16.07.2024 21:50

@AHaworth Я пытался объяснить, что вы можете видеть, что PERFORMACE заполняется до того, как начинает заполняться O из POS. Под синхронизацией я пытаюсь объяснить, что заливка должна находиться в одном и том же положении для обоих текстов. Таким образом, в середине O из POS в середине производительности тоже должно быть больше или меньше. Анимации должны закончиться одновременно.

Nilton Schumacher F 16.07.2024 23:48

Я не запускал код, но вместо того, чтобы создавать градиент to right, попробуйте сделать так, чтобы он располагался под тем же углом, что и выделенный курсивом текст (вероятно, около 120deg).

Noleli 16.07.2024 23:52

@Noleli Это не главная проблема, проблема в начинке.

Nilton Schumacher F 16.07.2024 23:56

Каждая часть имеет свою предысторию. Процент чего?

A Haworth 17.07.2024 00:42

@AHaworth, в зависимости от процента, он заполнит область дыры. Так, например, 50% будет заполнено, P и O (до половины) и производительность до (выполнения, половины R)

Nilton Schumacher F 17.07.2024 03:18

Я думаю, было бы полезно понять, если бы вы могли создать работоспособный фрагмент. Используйте <> в редакторе и убедитесь, что он показывает проблему.

A Haworth 17.07.2024 07:39
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
7
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Судя по информации, представленной в вашем комментарии, кажется, что вы хотите синхронизировать POS с PERFORMANCE для анимации градиента слева направо. Если да, попробуйте следующее:

<div class = "flex h-dvh flex-col items-center justify-center bg-black">
  <article class = "relative">
    <!-- text stroke -->
    <section class = "absolute inset-0 flex flex-col items-center px-10 text-transparent">
      <div class = "text-[148px] italic"><span style = "-webkit-text-stroke: 1px white">PO</span><span style = "-webkit-text-stroke: 1px #3b82f6">S</span></div>
      <span class = "text-[40px] italic" style = "-webkit-text-stroke: 1px white">PERFORMANCE</span>
    </section>
    <!-- current fill pivot: 50%; 10% gradient effect -->
    <section class = "flex flex-col items-center px-10 text-white" style = "mask:linear-gradient(to right, black 50%, transparent calc( 50% + 10% ));">
      <div class = "text-[148px] italic">PO<span class = "text-blue-500">S</span></div>
      <span class = "text-[40px] italic">PERFORMANCE</span>
    </section>
  </article>
</div>

Статическая ДЕМО в Tailwind Play.

Вы можете добиться эффекта анимации, динамически изменяя процент:

<div
  className = "flex flex-col items-center px-10 text-white"
  style = {{
    mask: `linear-gradient(to right, black ${percentage}%, transparent calc( ${percentage}% + 10% ))`,
  }}
>
  <!-- ... -->
</div>

Кажется, здесь утеряна первоначальная структура текста.

A Haworth 17.07.2024 07:43

@AHaworth, мне очень жаль. Раньше я не замечал этого требования. Я обновил ответ, включив в него обводку текста.

Karson Jo 17.07.2024 08:11

Это именно то, что мне нужно, я тоже что-то сделал и пришлю сюда

Nilton Schumacher F 17.07.2024 16:48

Другие вопросы по теме