Kevin Powell - Community•7mo ago

Tailwind Marquee Effect

Hello, this may be complex to explain but i'll try my best to do so. I have 4 grids (See image below) and each column can contain an image. My idea was to implement a Marquee effect on the Y axis, with the following conditions: 1) The Y axis must follow a what's-so-called "pattern": Y(1): Down, Y(2): Up, Y(3): Down, Y(4): Up 2) Images shouldn't be repetitive - I don't want the same images to appear somewhere. 4) One image at a time - For each Y, display one image at a time (I don't know if you get it) Note that the images must start and end on the container

1 Reply

4ngel_._•7mo ago

This can be complex to implement too 😅 Typescript tweaking should help. No clue on how to do that What I can try is to get data such as

[{
    "id": 1
    "image_url": "..."
}, ...]

[{
    "id": 1
    "image_url": "..."
}, ...]

And use it to tweak randomness, pattern and display count.

Gaming

Programming

Tailwind Marquee Effect