search

IEEE-SRMIST / Events-Platfrom

0 stars 0 forks source link

Marquee #5

Open kevinpauljacob opened 1 year ago

kevinpauljacob commented 1 year ago

image

kevinpauljacob commented 1 year ago

Left Side should go up and right side show go down. Marquee is a moving component often used in Sponsors sections.

kevinpauljacob commented 1 year ago

const partners = [ { name: 'Marquee Item 1' }, { name: 'Marquee Item 2' }, { name: 'Marquee Item 3' }, { name: 'Marquee Item 4' }, { name: 'Marquee Item 5' }, ]

const Marquee = () => { return (

supported by

{partners.map((partner, index) => ( {partner.name} ))}
{partners.map((partner, index) => ( {partner.name} ))}

) }

export default Marquee

kevinpauljacob commented 1 year ago

The above code can be used to create the marquee component. It uses an animation that is defined in tailwind.config file.

kevinpauljacob commented 1 year ago 
  animation: {
    marquee: 'marquee 25s linear infinite',
    marquee2: 'marquee2 25s linear infinite',
  },
  keyframes: {
    marquee: {
      '0%': { transform: 'translateX(0%)' },
      '100%': { transform: 'translateX(-100%)' },
    },
    marquee2: {
      '0%': { transform: 'translateX(100%)' },
      '100%': { transform: 'translateX(0%)' },
    },
  },