<marquee
behavior="scroll"
weight="150"
loop="infinity"
truespeed="300"
scrolldelay="10"
>
The last guard The last guard The last guard
</marquee>
.mainHeader {
width: 100%;
height: 154px;
background-image: url(../../styles/img/civilizations/main_header_back.png);
background-position: center;
background-size: cover;
position: relative;
> div {
animation: marquee 10s infinite linear;
width: 300%;
height: 100%;
position: absolute;
> span {
// right: 30%;
width: 33%;
margin-right: 60px;
font-family: 'Syne';
font-style: normal;
font-weight: 600;
font-size: 96px;
line-height: 144px;
color: #EFDAA9;
}
}
}
@keyframes marquee{
0%{transform: translate(0, 0);}
100%{transform: translate(-100%, 0)}
}
<div className={styles.mainHeader}>
<div>
<span>The last guard</span>
<span>The last guard</span>
<span>The last guard</span>
</div>
<img src={border} alt="border" />
</div>
.slick-center{
opacity: 1 !important;
}
.slick-slide {
opacity: 0.3;
}
const onSuccess = () => setError(false);
useEffect(() => {
if (!hasError) {
handleClose();
}
return () => setError(true);
}, [handleClose, hasError]);