marquee Block

jsx

Get Gokila SHASTHA’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
import React from "react";
import styles from "./MarqueBlock.module.scss"; 


    export default function MarqueBlock() {
    
      return (
        <section>
      <div className={styles.marquee}> <div className={styles.marqueeContent}>fdhdffghgh</div> </div>
        </section>
      );
    }

CSS

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: fixed;
    padding: 18px;
    color: #ffff;
    top: 0;
    width: 100%;
    z-index: 1000;
    font-size: 14px !important;
    font-weight: 400 !important;
    max-height: 30px;
    background: linear-gradient(to right, #8F2887, #462E7C);
    align-items: center;
    display: flex;
    justify-content: center;

   
    
  }
  .marqueeContent {
    display: inline-block;
    white-space: nowrap;
    animation: marquee  18s linear infinite;
   
  }
  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }