Text animation inside a slider bar component

Hello everyone. I built a slider bar to unlock the screen and I wanted to add some animation to the text like here https://codepen.io/maciekmaciej/pen/qZeNGY. My CSS code is not correct. Do you know what is wrong and how could I fix that? Thank you very much! 🙂
.track_drag {
border: 0.1px solid black;
width: 350px;
height: 60px;
left:700px;
top: 50%;
display: flex;
align-items: center;
position: absolute;
overflow: hidden;
border-radius: 7px;
touch-action: none;
background: url("../../assets/galaxy.jpg");
grid-row-start: 9;
grid-row-end: span 2;
}

#item {
width: 60px;
height: 50px;
justify-self: flex-start;
background-color: rgb(51, 66, 165);
border: 10px solid rgb(100, 66, 165);
border-radius: 20px;
/*touch-action: none;
user-select: none;*/
z-index: 999;
margin: 11px 1px;
background-size: 40% 40%;
background-repeat: no-repeat;
background-position: center;
background-image: url("a very long URL");
}
#item:active {
background-color: rgb(160, 153, 249);
border-color: rgb(100, 153, 249) !important;
}
#item:hover {
cursor: move;
border-color: rgba(136, 136, 136, .25);
}
.track_text {
height: 100%;
width: 100%;
position: absolute;
font: normal 15vh sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: black;
animation: slide 3s infinite ease-in-out;
}
@keyframes slide {
0% {
background-position: -100vh center;
}
60%, 100% {
background-position: 100vh center;
}
}
.slide {
animation: slide 3s infinite ease-in-out;
}
.track_drag {
border: 0.1px solid black;
width: 350px;
height: 60px;
left:700px;
top: 50%;
display: flex;
align-items: center;
position: absolute;
overflow: hidden;
border-radius: 7px;
touch-action: none;
background: url("../../assets/galaxy.jpg");
grid-row-start: 9;
grid-row-end: span 2;
}

#item {
width: 60px;
height: 50px;
justify-self: flex-start;
background-color: rgb(51, 66, 165);
border: 10px solid rgb(100, 66, 165);
border-radius: 20px;
/*touch-action: none;
user-select: none;*/
z-index: 999;
margin: 11px 1px;
background-size: 40% 40%;
background-repeat: no-repeat;
background-position: center;
background-image: url("a very long URL");
}
#item:active {
background-color: rgb(160, 153, 249);
border-color: rgb(100, 153, 249) !important;
}
#item:hover {
cursor: move;
border-color: rgba(136, 136, 136, .25);
}
.track_text {
height: 100%;
width: 100%;
position: absolute;
font: normal 15vh sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: black;
animation: slide 3s infinite ease-in-out;
}
@keyframes slide {
0% {
background-position: -100vh center;
}
60%, 100% {
background-position: 100vh center;
}
}
.slide {
animation: slide 3s infinite ease-in-out;
}
6 Replies
uliana3412
uliana3412•9mo ago
.Here's my React code :
<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
<div id="item" ref={dragItemRef}></div>
<p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
</div>
<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
<div id="item" ref={dragItemRef}></div>
<p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
</div>
Thank you very much!
uliana3412
uliana3412•9mo ago
No description
Darryll
Darryll•9mo ago
Your text is missing some of the CSS that's important
.track-text {
mix-blend-mode: overlay
background: radial-gradient(ellipse, white 50%, black 70%) black no-repeat
-webkit-background-clip: text
-webkit-text-fill-color: transparent
}
.track-text {
mix-blend-mode: overlay
background: radial-gradient(ellipse, white 50%, black 70%) black no-repeat
-webkit-background-clip: text
-webkit-text-fill-color: transparent
}
mix-blend-mode affects how the opacity interacts with the background the background is a circle gradient which is black on the outside and white in the middle. That white in the middle is what you see move across the background-clip clips the background to the text the text-fill-color makes the text color transparent the slide keyframe only moves that background aroudn so without this CSS it won't do what you expect
uliana3412
uliana3412•9mo ago
Thank you very much! It's working now!😃 I have to wait like 7 seconds before the animations begins again. Do you know how to shorten that time? Thanks a lot!
Darryll
Darryll•9mo ago
Make a codepen and send it and then people can look it should take about 1.8s for the animation to play start to finish then another 1.2s until it starts again animation: slide 3s infinite ease-in-out; Animation is 3s long
0% {
background-position: -100vh center;
}
60%, 100% {
background-position: 100vh center;
}
0% {
background-position: -100vh center;
}
60%, 100% {
background-position: 100vh center;
}
0 to 60% of that duration it plays the animation, 60 to 100% it just waits You can adjust those numbers to whatever you want
uliana3412
uliana3412•9mo ago
You made it clear. Thank you very much ! 🙂
Want results from more Discord servers?
Add your server