Marquee effect or infinite scrolling

How to import code
“You made it so simple. My new site is so much faster and easier to work with than my old site. I just choose the page, make the change.”
Johna Doe
Freelance React Developer
“Simply the best. Better than all the rest. I’d recommend this product to beginners and advanced users.”
John Doe
Freelance React Developer
“I cannot believe that I have got a brand new landing page after getting Omega. It was super easy to edit and publish.”
Jehna Doe
Graphic Designer
“Absolutely amazing plugin. It was super easy to edit and publish. So much interesting options and I need to study it”
Jehna Doe
Graphic Designer
“You made it so simple. My new site is so much faster and easier to work with than my old site. I just choose the page, and make the change.”
Johna Doe
Freelance React Developer
“Simply the best. Better than all the rest. I’d recommend this product to beginners and advanced users.”
John Doe
Freelance React Developer
“I cannot believe that I have got a brand new landing page after getting Omega. It was super easy to edit and publish.”
Jehna Doe
Graphic Designer
“Absolutely amazing plugin. It was super easy to edit and publish. So much interesting options and I need to study it”
Jehna Doe
Graphic Designer

Marquee effect – we made some videos on how to do this early, but now we invented a bit better way to do this via slider block.

The idea is to duplicate items and set a linear free scroll from one area to another. I use CSS grid here to make 4 column items. Greenshift has the option to convert css grid to the slider, so it will be easier to do this. But you can use not only CSS grid, technically, you can duplicate anything, just put this in the slider block and duplicate slides.

Then you need to set speed, remove delay, enable Linear mode, tweak paddings and size and remove arrows, bullets.

I also added half-faded items on the sides, for this, I created two containers with gradient and alpha opacity and put them on both sides as absolutely positioned elements. if your site is on a black background, you will need to replace the white color to black or remove these containers.

«
»