CSS-only infinite scrolling carousel animation
blog.logto.io
CSS-only infinite scrolling carousel animation
1–10 of 29 posts
Re: CSS-only infinite scrolling carousel animation
#2I think you could probably cause it to move on click by using the target selector, like in this old article here that is probably a bit out of date nowadays
https://blog.logrocket.com/dynamism-and-css-calculations/
>But there is a pseudo-class in the location category that I don’t often see used: the target pseudo-class, which allows us to style a part of the page that is the currently active target. In other words, if we have a link that leads to a part of the page, we can style that part of the page when the link is clicked.
Re: CSS-only infinite scrolling carousel animation
#3Have 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.
Re: CSS-only infinite scrolling carousel animation
#4Have 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.
Re: CSS-only infinite scrolling carousel animation
#5Have 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.
It works fine on both Chrome and Firefox on my Android (Pixel 8). Maybe the developer doesn't have an iPhone?
Re: CSS-only infinite scrolling carousel animation
#6Have 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.
Same with Brave on android, text is breaking out and overflowing beyond the vp
Re: CSS-only infinite scrolling carousel animation
#7Have 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.
It's the same with a sufficiently narrow browser window on my laptop.
Re: CSS-only infinite scrolling carousel animation
#8Have 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.
thank you for pointing out. it turns out that a `overflow: hidden` was missing. should be ok now.
Re: CSS-only infinite scrolling carousel animation
#9I think you could probably cause it to move on click by using the target selector, like in this old article here that is probably a bit out of date nowadays https://blog.logrocket.com/dynamism-and-css-calculations/ >But there is a pseudo-class in the location category that I don’t often see used: the target pseudo-class, which allows us to style a part of the page that is the currently active target. In other words,…
thank you for your suggestion. will explore the target selector to see what can be done.
Re: CSS-only infinite scrolling carousel animation
#10It’s with extra steps, except for the pause which i’m not sure is possible