MegaTech Webflow template features three infinity marquee sliders, each requiring custom CSS to apply a fade or gradient mask effect. Below are the details for each slider and its corresponding CSS code.

Logo strip infinity marquee

This horizontal marquee displays logos with a fade effect on both sides.

https://prod-files-secure.s3.us-west-2.amazonaws.com/c08e9cc9-3d03-4977-82a4-2278b0c13abd/22df4aa9-ef39-4804-8b61-6798707145f9/marquee-2.png

/* Left & Right Marquee Mask (Logo Strip) */

.marquee-row.left-and-right-marquee-gradient-mask {
  -webkit-mask-image: **linear-gradient(90deg, rgba(217, 217, 217, 0) 7.2%, #9B9B9B 21.59%, #888 76.6%, rgba(115, 115, 115, 0) 91.84%) !important**;
}

Horizontal testimonials infinity marquee

This slider showcases testimonials horizontally with a bottom fade effect.

https://prod-files-secure.s3.us-west-2.amazonaws.com/c08e9cc9-3d03-4977-82a4-2278b0c13abd/5340ee04-3d60-492c-a6ab-876cd01c5986/marquee-1.png

/* Bottom Marquee Mask (Horizontal Testimonials Slider) */

.bottom-marquee-gradient-mask {
  -webkit-mask-image: **linear-gradient(180deg, #D9D9D9 0%, rgba(115, 115, 115, 0) 83%) !important**;
}

Vertical testimonials infinity marquee

This slider presents testimonials vertically with fade effects at both top and bottom.

https://prod-files-secure.s3.us-west-2.amazonaws.com/c08e9cc9-3d03-4977-82a4-2278b0c13abd/3e7cb333-a933-48a4-afbf-78cb174ddcb9/marquee-3.png

/* Top & Bottom Marquee Mask (Vertical Testimonials Slider) */

.bottom-and-top-marquee-gradient-mask {
  -webkit-mask-image: **linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #B4B4B4 40%, #A8A8A8 50%, #9E9E9E 60%, rgba(115, 115, 115, 0) 100%) !important**;
}

Implementation

  1. Each CSS snippet should be applied to its respective marquee element using the appropriate class name.
  2. The gradient masks create a smooth fade effect, enhancing the visual appeal of the infinite scroll.