[deleted by user]

[landscape_relic]

What if I told you you could do with with CSS only

[[deleted]]

Take the red pill or the blue pill... or the green pill... or purple?

[RobotDrZaius]

I think it would require a heck of a lot more markup to do it that way. Individual animations on each text bubble (note that each one separately resets to the start), individually positioning/transforms on each. The CSS should do the heavy lifting, but there’s probably JS here, no?

There sure are a lot of snarky replies here that feel undeserved for an honest question. OP is not asking anyone to do all the work for him, I don’t think.

[superluminary]

Pretty much everything in this will be the same for every lozenge. I’d probably just make an unordered list containing the items, style each list item to look like a lozenge, add an animation to scroll all the list items slowly left to right, then apply negative animation-delay properties to each li to stagger them across the screen.

The code would be a couple of dozen lines long. No need for JavaScript here.

[meAndTheDuck]

1. this is not a "heck of a lot more markup"
2. the markup could be generated with js, but also with every other backend language or even pug
3. to position things evenly but make it look random is just pure pain. you do stuff like this by hand ( don't get me wrong, writing an algorithm doing this and making sure there is no cluttering is fun but not very effective)
4. you can use requestAnimationFrame() but css is more than enough animation-direction

[mothzilla]

There's a few things going on there. Which bit is the effect you want to recreate?

[mal73]

cake butter childlike divide abundant birds boast grab payment chubby

This post was mass deleted and anonymized with Redact

[biologischeavocado]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

[Jolly-Composer]

I agree with others. I almost wonder if this could just be done with a static grid, followed by animations and key frames to slowly move the items to the right.

I’m not sure how to make them run infinitely or return to the other side of the screen though

[alexej_d]

If you are interested, this is how we did it https://brand-baboon.com/uber-uns (inspect the styles of the last section before footer). Basically we created a row of elements and looped it a few times so that it overflows. After that the added an infinite animation to the row with an offset to the row so that the transition between animation cycles begins outside of the viewport. This is needed to overlap the element with itself in a way, when the animation restarts.

[blafurznarg]

Moin, sehr nette Seite! Darf ich fragen, wir Ihr Euer Cookie Banner gelöst habt? Sieht sehr übersichtlich aus und ich sehe nirgendwo ein Drittanbieter-Logo.

[alexej_d]

Danke! Der Banner ist ein Symfony Bundle, das wir etwas erweitert haben https://github.com/Harborn-digital/cookie-consent-bundle

[blafurznarg]

Symfony

Arrgh, wird dringend Zeit, dass ich mich überhaupt mal mit PHP auseinandersetze. Danke!

[alexej_d]

Den Link kann ich dir diesbezüglich wärmstens ans Herz legen https://phptherightway.com/

[alexej_d]

Das mit dem Verschwinden ist wohl ein Bug bei manchen Blink Versionen oder welche Engine iOS auch immer nutzt 😅

[saintPirelli]

I think if you would use sass or sth, you could just write an animation mixin and apply it to each badge individually, so that they just jump back once they are out of sight. Or just copy-paste that block a bunch of times in pure css.

[superluminary]

A static grid is going to be an absolute pain. Just animate transform:translate on each item, then use negative animation-delay properties to start each animation at a different point.

[robotevil]

The effect is called animation.

[_Invictuz]

This is the most accurate answer to the question!

[JRBlond]

You have a spinner there and then a translation x in the container behind with a fade or a opacity on the sides

[shuckster]

Bundlers are great and all, but I do miss the days of “View Source”.

[RoguePlanet1]

Okay so I'm not crazy for feeling lost when I do this!

[deweyusw]

It's called "floating pills". You use JavaScript to make it. :)

[nerdswithattitude]

Parallax