<div class="supt-scroll-item">
<p class="supt-scroll-item__text">Scroll down</p>
<span class="supt-scroll-item__inner">
<span class="supt-scroll-item__icon"></span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="63" viewbox="0 0 2 63" fill="none" class="supt-scroll-item__line">
<path d="M1 1L1 63" stroke="url(#paint0_linear_10281_8341)" stroke-linecap="round" stroke-dasharray="1 4" />
<defs>
<linearGradient id="paint0_linear_10281_8341" x1="1.5" y1="1" x2="1.5" y2="63" gradientunits="userSpaceOnUse">
<stop offset="0.4" stop-color="#ED002F" />
<stop offset="1" stop-color="#ED002F" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
No notes defined.
<div class="supt-scroll-item">
<p class="supt-scroll-item__text">Scroll down</p>
<span class="supt-scroll-item__inner">
<span class="supt-scroll-item__icon"></span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="63" viewbox="0 0 2 63" fill="none" class="supt-scroll-item__line">
<path d="M1 1L1 63" stroke="url(#paint0_linear_10281_8341)" stroke-linecap="round" stroke-dasharray="1 4"/>
<defs>
<linearGradient id="paint0_linear_10281_8341" x1="1.5" y1="1" x2="1.5" y2="63" gradientunits="userSpaceOnUse">
<stop offset="0.4" stop-color="#ED002F"/>
<stop offset="1" stop-color="#ED002F" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
/* No context defined. */
.supt-scroll-item {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
z-index: 2;
pointer-events: none;
&__text {
@extend %t-body-xs;
color: $color-white;
text-align: center;
margin-bottom: 18px;
}
&__inner {
position: relative;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $color-main;
background: radial-gradient(50% 50% at 50% 50%, $color-dark 0%, $color-black-background 100%);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid rgba(237, 0, 47, 0.3);
animation: pulse 2s infinite;
}
}
&__icon {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: $color-main;
box-shadow: 0px 0px 8px $color-main;
}
&__line {
margin-top: -16px;
}
}
@keyframes pulse {
0%,
10% {
opacity: 1;
transform: scale(1);
}
60% {
opacity: 1;
}
100% {
transform: scale(1.625);
opacity: 0;
}
}