Video yükleniyor...
Video Yüklenemedi
User experience is key - that's why the best projects are building on Scroll. 📜 Catch Raza and explain how Scroll enables economic security through validity proofs. 🔐
134,557 görüntüleme • 1 yıl önce •via X (Twitter)
9 Yorum
Scroll1 yıl önce
🎧 Listen to the full @_TalkingTokens podcast with @jacqmelinek:
kate ☁️🌱🧩1 yıl önce
@razacodes @sandyzkp Yeah, as users we experienced one thing on Scroll: Getting scammed
Ngoạ Long1 yıl önce
@razacodes @sandyzkp Scam
tomb Crypto 🐐1 yıl önce
@razacodes @sandyzkp
AnyYas1 yıl önce
@razacodes @sandyzkp Hahahahahaa user experience?????? #scrollscam
0xAkhMi1 yıl önce
@razacodes @sandyzkp User experience really @sandyzkp ? 😂😂😂
Flora1 yıl önce
@razacodes @sandyzkp scam project
bigchops `(Ø,G)`1 yıl önce
@razacodes @sandyzkp Nobody is building on your scam chain. Fuck off
Kanishka | (Ø,G)1 yıl önce
@razacodes @sandyzkp @Scroll_ZKP talking about user experience lol
![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)
