スクロールテキスト

デモ

See the Pen scroll text1 by logsuke (@design-list) on CodePen.

コード

<section id="section1" class="section">
              
               <div class="scroll">
                    <p>     Lorem ipsum dolor sit amet.      　　　　　　　　　　　　</p>
               </div>
          </section>

/*=== Base ===*/

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box
}

:root {
     --nav-height: 8rem;
     --max-width: 1200px;
     --container-padding: 0 4rem;
     --gap: 5rem;
     --bg-color: rgb(240, 240, 240);
     --first-color: rgb(172, 245, 255);
     --text-color: rgb(77, 77, 77);
}


/*=== Font ratio ===*/

html {
     scroll-behavior: smooth;
     font-size: 62.5%;
}

body {
     font-size: 1.6rem;
}

ul {
     list-style: none;
}

a {
     text-decoration: none;
     color: var(--text-color);
}

/*=== section ===*/

.section {
     min-height: 100vh;
     margin: 0 auto;
     padding-top: var(--nav-height);
     overflow: hidden;
     position: relative;
}

.scroll p {
     -webkit-text-stroke: 2px;
     -webkit-text-stroke-color: #000;
     -webkit-text-fill-color: transparent;
     left: 100%;
}

.scroll p {
     position: absolute;
     white-space: nowrap;
     font-size: 12rem;
     line-height: 100vh;
     width: auto;
     animation: animate 5s linear infinite;
}

@keyframes animate {
     0% {
          transform: translateX(0);
     }

     100% {
          transform: translate(-200%);
     }
}