🍱 Misc
水平滚动动画

水平滚动动画

February 23, 2024·wylu
wylu
Infinite Scroll
HTML CSS JavaScript ReactJS Figma Photoshop Premiere Pro Figma Angular Node JS
HTML CSS JavaScript ReactJS Figma Photoshop Premiere Pro Figma Angular Node JS
HTML CSS JavaScript ReactJS Figma Photoshop Premiere Pro Figma Angular Node JS
HTML CSS JavaScript ReactJS Figma Photoshop Premiere Pro Figma Angular Node JS
HTML CSS JavaScript ReactJS Figma Photoshop Premiere Pro Figma Angular Node JS
HTML CSS JavaScript ReactJS Figma Photoshop Premiere Pro Figma Angular Node JS
HTML CSS JavaScript ReactJS Figma Photoshop Premiere Pro Figma Angular Node JS
HTML CSS JavaScript ReactJS Figma Photoshop Premiere Pro Figma Angular Node JS

Are you prepare to creating an impressive infinite horizontal scroll animation using only CSS? Ok, you have come to the right place. Above is the display effect. Next, i will show you the code directly.

Click me to see the full code
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Infinite Scroll</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div class="scroll" style="--time:20s">
      <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>ReactJS</span>
        <span>Figma</span>
        <span>Photoshop</span>
        <span>Premiere Pro</span>
        <span>Figma</span>
        <span>Angular</span>
        <span>Node JS</span>
      </div>
      <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>ReactJS</span>
        <span>Figma</span>
        <span>Photoshop</span>
        <span>Premiere Pro</span>
        <span>Figma</span>
        <span>Angular</span>
        <span>Node JS</span>
      </div>
    </div>
    <div class="scroll" style="--time:30s">
      <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>ReactJS</span>
        <span>Figma</span>
        <span>Photoshop</span>
        <span>Premiere Pro</span>
        <span>Figma</span>
        <span>Angular</span>
        <span>Node JS</span>
      </div>
      <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>ReactJS</span>
        <span>Figma</span>
        <span>Photoshop</span>
        <span>Premiere Pro</span>
        <span>Figma</span>
        <span>Angular</span>
        <span>Node JS</span>
      </div>
    </div>
    <div class="scroll" style="--time:25s">
      <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>ReactJS</span>
        <span>Figma</span>
        <span>Photoshop</span>
        <span>Premiere Pro</span>
        <span>Figma</span>
        <span>Angular</span>
        <span>Node JS</span>
      </div>
      <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>ReactJS</span>
        <span>Figma</span>
        <span>Photoshop</span>
        <span>Premiere Pro</span>
        <span>Figma</span>
        <span>Angular</span>
        <span>Node JS</span>
      </div>
    </div>
    <div class="scroll" style="--time:40s">
      <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>ReactJS</span>
        <span>Figma</span>
        <span>Photoshop</span>
        <span>Premiere Pro</span>
        <span>Figma</span>
        <span>Angular</span>
        <span>Node JS</span>
      </div>
      <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
        <span>ReactJS</span>
        <span>Figma</span>
        <span>Photoshop</span>
        <span>Premiere Pro</span>
        <span>Figma</span>
        <span>Angular</span>
        <span>Node JS</span>
      </div>
    </div>

    <div class="scroll imgBox" style="--time:25s">
      <div>
        <img src="./images/html.png" alt="" />
        <img src="./images/css.png" alt="" />
        <img src="./images/js.png" alt="" />
        <img src="./images/React.png" alt="" />
        <img src="./images/angular.png" alt="" />
        <img src="./images/figma.png" alt="" />
        <img src="./images/photoshop.png" alt="" />
        <img src="./images/mui.png" alt="" />
        <img src="./images/tailwind.png" alt="" />
        <img src="./images/premierePro.png" alt="" />
      </div>
      <div>
        <img src="./images/html.png" alt="" />
        <img src="./images/css.png" alt="" />
        <img src="./images/js.png" alt="" />
        <img src="./images/React.png" alt="" />
        <img src="./images/angular.png" alt="" />
        <img src="./images/figma.png" alt="" />
        <img src="./images/photoshop.png" alt="" />
        <img src="./images/mui.png" alt="" />
        <img src="./images/tailwind.png" alt="" />
        <img src="./images/premierePro.png" alt="" />
      </div>
    </div>

    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: "Poppins", sans-serif;
        box-sizing: border-box;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #000;
        flex-direction: column;
      }

      .scroll {
        position: relative;
        display: flex;
        width: 700px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent,
          #fff 20%,
          #fff 80%,
          transparent
        );
      }

      .scroll div {
        white-space: nowrap;
        animation: scroll var(--time) linear infinite;
        animation-delay: calc(var(--time) * -1);
      }

      .scroll div:nth-child(2) {
        animation: scroll2 var(--time) linear infinite;
        animation-delay: calc(var(--time) / -2);
      }

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

        100% {
          transform: translateX(-100%);
        }
      }

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

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

      .scroll div span {
        display: inline-flex;
        margin: 10px;
        letter-spacing: 0.2em;
        background: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        transition: 0.5s;
      }

      .scroll div span:hover {
        background: #3fd2f9;
        cursor: pointer;
      }

      .imgBox div {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .imgBox img {
        max-width: 100px;
        scale: 0.8;
      }
    </style>
  </body>
</html>

🚀 You also can watch the video to get this skill that infinite horizontal scroll animation.

最后更新于
可交互的六边形网络