Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS-only infinite scrolling carousel animation

blog.logto.io

Post reply on HN
Print view View original

21–29 of 29 posts

Re: CSS-only infinite scrolling carousel animation

#21

Post by p0w3n3d »

netmare wrote: post #18
balmy_tommy wrote: post #12

Earlier quoted context omitted.

some how it's deprecated: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...

Marquee, blink, i, b... Older people like me remember the old "innocent" days of the internet. It's probably nostalgia, but the modern web doesn't seem exciting anymore...

quickly got considered a bad design as it prevents revealing the whole information at once and requires a lot of focus and patience. However here I guess in this form it can be used for presenting other products as an additional row

Re: CSS-only infinite scrolling carousel animation

#22

Post by nicoburns »

worble wrote: post #20
nicoburns wrote: post #19

Earlier quoted context omitted.

> You can’t test on Apple devices without owning one, or paying altogether too much. Yep! And it sucks, but this is the #1 reason why most web developers are using macs. If you want to test across all major platforms, it's the only way to do it from one machine (testing windows on a mac is a bit iffy on Apple Silicon macs, but it can be done).

>but this is the #1 reason why most web developers are using macs Have you got a link to that? I'd be interested in seeing the stats and breakdown.

I don't have any stats, but this has been my professional experience in the UK. It's entirely possible that this doesn't hold up worldwide, or outside of specialist web development agencies.

Re: CSS-only infinite scrolling carousel animation

#23

Post by rpastuszak »

retrac98 wrote: post #4
baliex wrote: post #3

Have you tried this in a mobile browser? I’m seeing the headline cut off because the page ends up being wider than my viewport because of the position of the later carousel elements. It otherwise looks great but the side scrolling is too much of a compromise for me. I’m using Safari on iPhone.

Over a decade on from “mobile first” I’m always surprised at how few developers actually test their work on mobile devices.

Which is a shame because one of the upsides of building mobile-first is that you generally end up with simpler/easier to reason about results.

(not a comment on this site implementation per se, but a general remark)

Re: CSS-only infinite scrolling carousel animation

#27

Post by extra88 »

knodi123 wrote: post #26
MalcolmDwyer wrote: post #24

Earlier quoted context omitted.

It's also not "CSS only".

is it not? Because of the @keyframes rule? https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

I think they're saying because the technique requires adding a second copy of the content in HTML, it's not "CSS-only."

For the pedants, they could change the title to "No-JS infinite scrolling carousel animation."

Re: CSS-only infinite scrolling carousel animation

#29

Post by Lorin »

baliex wrote: post #3

Have you tried this in a mobile browser? I’m seeing the headline cut off because the page ends up being wider than my viewport because of the position of the later carousel elements. It otherwise looks great but the side scrolling is too much of a compromise for me. I’m using Safari on iPhone.

I did this back in 2018 with full mobile support and nice edge fading: https://codepen.io/Lorin/pen/OEJGrM
Post reply on HN