Я пытаюсь создать эффект заливки текста, который будет контролироваться 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
@AHaworth Я пытался объяснить, что вы можете видеть, что PERFORMACE заполняется до того, как начинает заполняться O из POS. Под синхронизацией я пытаюсь объяснить, что заливка должна находиться в одном и том же положении для обоих текстов. Таким образом, в середине O из POS в середине производительности тоже должно быть больше или меньше. Анимации должны закончиться одновременно.
Я не запускал код, но вместо того, чтобы создавать градиент to right
, попробуйте сделать так, чтобы он располагался под тем же углом, что и выделенный курсивом текст (вероятно, около 120deg
).
@Noleli Это не главная проблема, проблема в начинке.
Каждая часть имеет свою предысторию. Процент чего?
@AHaworth, в зависимости от процента, он заполнит область дыры. Так, например, 50% будет заполнено, P и O (до половины) и производительность до (выполнения, половины R)
Я думаю, было бы полезно понять, если бы вы могли создать работоспособный фрагмент. Используйте <> в редакторе и убедитесь, что он показывает проблему.
Судя по информации, представленной в вашем комментарии, кажется, что вы хотите синхронизировать 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>
Кажется, здесь утеряна первоначальная структура текста.
@AHaworth, мне очень жаль. Раньше я не замечал этого требования. Я обновил ответ, включив в него обводку текста.
Это именно то, что мне нужно, я тоже что-то сделал и пришлю сюда
Я не совсем понимаю, что значит «заливка не синхронизирована». Не могли бы вы объяснить немного больше, какой эффект вы хотите? С чем синхронизировать заливку?