<div class="wall">
    <div class="row"><span>кубок</span><span>Сахалина</span><span>2024</span><span>хоккей</span><span>турнир</span></div>
    <div class="row"><span>дальний</span><span>восток</span><span>2024</span><span>хоккей</span><span>спорт</span><span>сахалинская</span><span>область</span></div>
    <div class="row"><span>адреналин</span><span>восторг</span><span>страсть</span><span>единство</span></div>
    <div class="row"><span>трус</span><span>не</span><span>играет</span><span>в</span><span>хоккей</span></div>
    <div class="row"><span>АРСО</span><span>правительство</span><span>сахалинской</span><span>области</span><span>дворец</span><span>спорта</span><span>кристалл</span></div>
</div>

<div class="container">
    <div class="hero">
        <div class="hero__tagline">саххоккей.рф</div>
        <div class="hero__title">КУБОК <span>2024</span> САХАЛИНА</div>
        <div class="hero__subtitle">arso2017@list.ru</div>
        <div class="hero__subtitle">https://t.me/sakhhockey</div>
    </div>
</div>

body {
  height: 100vh;
  overflow: hidden;
}

.wall {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.row {
  z-index: -99;
  display: flex;
  animation: 200s linear ticker-to-left infinite;
  
  &:nth-child(even) {
    animation: 60s linear ticker-to-right infinite;
    justify-content: flex-end;
  }

  span {
    margin-right: 0.2em;
    font-family: sans-serif;
    color: transparent;
    font-size: 20vh;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    -webkit-text-stroke-width: 4px;
            text-stroke-width: 4px;
    -webkit-text-stroke-color: #f5f5f5;
            text-stroke-color: #f5f5f5;
  }
  
}

@keyframes ticker-to-left {
    0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

@keyframes ticker-to-right {
    0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(100%, 0, 0); }
}


/* Unrelated to demo */

@import 'https://fonts.googleapis.com/css?family=Montserrat:800|Poppins:400';

.container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 99;
}

.hero {
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    height: 100%;
	font-size: 1.2em;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

.hero__tagline {
	margin: 0 0 1rem 0;
}

.hero__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
	font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
    
    span {
        color: #4FA5C0;
        -webkit-text-stroke-width: 4px;
                text-stroke-width: 4px;
        -webkit-text-stroke-color: #000;
                text-stroke-color: #000;
        
        &:hover {
            -webkit-text-stroke-color: #4FA5C0;
                    text-stroke-color: #4FA5C0;
        }
    }
}

.hero__subtitle {
	margin: 1rem 0 0 0;
}