다시 작성된 제목은 HTML에서 그라데이션 배경으로 자동 채우기 슬라이더를 만드는 방법입니다.

Question

저는 HTML을 가지고 놀면서 그라데이션으로 스스로 채워지는 슬라이더를 만들고 싶지만 이것이 거의 불가능하다고 생각합니다. 몇 시간 동안 조사했지만 답을 찾을 수 없는 것 같습니다.

JS가 필요한 것 같은데 거기에는 완전히 공백이 있습니다.

으아아아 으아아아

위에서 언급한 방법을 시도해보았습니다. 이 사이트(https://codepen.io/kaiquenunes23/pen/LYEvegK)에서 여러 가지를 시도했지만 제어할 수 없습니다.

저는 StackOverflow에서 다른 여러 스레드도 읽었습니다.

Answer 1

이것을 시도해 보세요

으아악

Answer 2

JS는 엄지손가락의 현재 위치를 가져오는 데 필요합니다.

이 코드 조각은 슬라이더의 위치를 ​​읽고 이동 비율을 계산하여 이를 수행합니다. 그런 다음 CSS 변수 --pc를 해당 백분율 값으로 설정합니다.

슬라이더에는 두 개의 배경 이미지가 있습니다. 첫 번째는 엄지 손가락에 대한 투명한 배경 이미지이고 그 다음에는 원하는 회색 색상입니다. "아래"는 원하는 선형 그라데이션인 두 번째 배경 이미지입니다.

이렇게 하면 슬라이더를 오른쪽으로 움직이면 선형 그라데이션이 나타납니다.

으아아아 으아아아 으아아아