I don’t know what you mean by “on scroll,” but the animation you want is applied by the CSS psuedo-class :hover. There is no psuedo-class for scroll, so you’ll need to probably involve Javascript.
The list of available CSS psuedo-classes can be found here. Try experimenting with them to see if they’ll do what you want.
In this code title border is “spreading” on hover and I want to create the same effect on a scroll. How can I do this?
.title {
position: relative;
font-size: 40px;
font-weight: bolder;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
color: #262626;
}
.title::before {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
height: 5px;
background: linear-gradient(90deg, #ED1C24, rgb(230, 7, 74));
}
.section-box:hover .title::before {
left: 0;
right: 0;
height: 2px;
transition: 1s;
background: #ED1C24;
}<section class="section-box" id="about">
<div class="container">
<div class="section-head">
<h1 class="title">about us</h1>
</div>
</div>
</section>Not sure what you mean by “spreading” or what exactly you’re trying to achieve. Can you post an example of the title “spreading?” Do you mean the linear gradient?
yes, title bottom linear-gradient