JSFiddle - React, Tailwind, and code Playground
HTML
<section class="banner">
<div class="banner_content">
<div class="one_row_content_banner">
<span class="one_row_content_banner-text one_row_text-style">Lorem</span>
<span class="one_row_content_banner-clip_text one_row_text-style">
<b class="is_visible slide_banner">слово1</b>
<b class="no_visible slide_banner">слово2</b>
</span>
</div>
</div>
</section>
CSS
.one_row_content_banner{
display: flex;
transform: translateY(0);
animation: top_one 1s ease-in-out;
}
.one_row_text-style{
font-family: 'Raleway', sans-serif;
font-weight: 900;
font-size: 3rem;
text-transform: uppercase;
color: #000;
}
.one_row_content_banner-text{
display: block;
margin: 0 10px;
}
.one_row_content_banner-clip_text{
position: relative;
overflow: hidden;
border-right: 1px solid #000;
font-weight: 700;
padding-right: 218px;
}
.is_visible{
opacity: 1;
position: absolute;
}
.no_visible{
display: none;
}
JavaScript
var slide = document.querySelectorAll('.slide_banner');
for (let i = 0; i < slide.length; i++) {
var box_animation = document.querySelector('.one_row_content_banner-clip_text');
function animate() {
var b = document.querySelector('.one_row_content_banner-clip_text'), m = 218, n = 1;
function c(){
m -= n;
if(m == 218 || m == 0) n = -n;
b.style.paddingRight = m + 'px';
requestAnimationFrame(c)
}
requestAnimationFrame(c);
setInterval(function slide_class() {
if(slide[i].classList.contains('is_visible')){
slide[i].classList.remove('is_visible');
slide[i].classList.add('no_visible');
}else{
slide[i].classList.remove('no_visible');
slide[i].classList.add('is_visible');
}
},7500)
}
animate();
}