正在加载视频...
视频加载失败
CSS Trick 🙃 Need to change your scrollbar position? You can flip the scrollbar position for an element using a double invert 🙂 ul, li { scale: 1 -1; } /* y-axis flip */ A negative scale inverts the element on that axis ✨ For a bonus, control the... show more
101,031 次观看 • 2 年前 •via X (Twitter)
10 条评论
Here's that @CodePen link! 🚀 Should be good in all browsers and a nifty trick to solve the problem For horizontal scrolling, you could also use "direction" but cascading negative scale feels nicer IMO 😎 cc @BowserSZN 🤙
Codepen Link missing:
Beat me to it! 🤙😅🥇
Dude, I love your tutorials - they are great. I’m wondering how do you go about setting up this css patterns within a next js app, do you create a module.css for each component, or a mix between tailwind and a module.css - I’m curious and also looking to have a more solid pattern
To be honest - Need to open source "Brick Yourself" as that kinda shows my approach For the most part, I go Tailwind and then use the global style file with className on the relevant pieces of UI. Find this keeps me mindful of the styles I'm adding 💯
FYI #cs_internship @maryam_davoudi @Ali_Sdg90 @sadeghiiw_
This is cool, but from an annoyingly “jakobnielseny” usability perspective I’m wondering whether you should do this or not. It’s quite established that scrollbars are on bottom and right. Changing this might confuse the user about what is the target container of the scrollbar. NeXT computers had the scrollbars in the left side but since then I can’t remember any other examples. I had a similar case in a project with a big separately scrolling table. Moving the scrollbar on top was suggested but we decided to implement chevron buttons as “overflow indicators” instead.
Bro, what app do you use to record those videos?
Awesome!
Yeah – Totally! 💯 They're awkward in general 🥲 Keen to see scrollbar-gutter land in Safari though 🫶
![CSS Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇](https://image.24vids.com/tw-1752479022674481373/ext_tw_video_thumb/1752475535978934272/pu/img/5naYIYo6vw_NbpbO.jpg)
![CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇](https://image.24vids.com/tw-1738039148672426164/ext_tw_video_thumb/1738032359302156288/pu/img/s8BufTPl8FRWOouG.jpg)
