正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

jhey ʕ•ᴥ•ʔ

144,239 subscribers

196,528 次观看 • 1 年前 •via X (Twitter)

教育艺术科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈1 年前

ya know the drill 🤙 like seeing these and want to learn more about how to build awesome UIs for the web? next issue of "The Craft of UI" will be Wednesday 🙏 👉

Prajwal Dhule 的头像

Prajwal Dhule1 年前

🔥 never stop cooking

Ed 的头像

Ed1 年前

You are what @rauchg wishes v0 was

Januario 的头像

Januario1 年前

Are we getting spring animations in css anytime soon?

Luis Scura 的头像

Luis Scura1 年前

Wow. Nice!

Gabriel Christo 的头像

Gabriel Christo1 年前

Nice bounce effect. Can you make a Bouncy Yaris in Html Css JS?

一丝的头像

一丝1 年前

Does CSSWG have a proposal?

Wadad Parker 的头像

Wadad Parker1 年前

Bro is him 🛐

Samuel Gregory 的头像

Samuel Gregory1 年前

🤯

knickerbocker.eth 的头像

knickerbocker.eth1 年前

This is illegal 🤯

相关视频

adding the little details™ progressively enhance the overdrag bounce with a sprinkle of JavaScript and some CSS linear() ✨

adding the little details™ progressively enhance the overdrag bounce with a sprinkle of JavaScript and some CSS linear() ✨

jhey ʕ•ᴥ•ʔ

90,151 次观看 • 2 年前

Use masks for your scrollable areas Use the CSS at-rule `property` to register stops as animatable values. The browser treats your custom property as a `percentage`, so the mask edges transition smoothly. Result: scroll lists that fade at the edges, revealing content underneath. No JavaScript needed.

Use masks for your scrollable areas Use the CSS at-rule `property` to register stops as animatable values. The browser treats your custom property as a `percentage`, so the mask edges transition smoothly. Result: scroll lists that fade at the edges, revealing content underneath. No JavaScript needed.

define

49,867 次观看 • 2 个月前

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,682 次观看 • 3 年前

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

jhey ʕ•ᴥ•ʔ

57,717 次观看 • 1 年前

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

111,954 次观看 • 1 年前

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

jhey ʕ•ᴥ•ʔ

168,962 次观看 • 26 天前

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

Wes Bos

222,689 次观看 • 1 年前

What’s old is new again 🌀 Learn how to create fluid, responsive scroll-driven animations that give your users engaging, app-like web experiences—with only a few lines of CSS. 🔗

What’s old is new again 🌀 Learn how to create fluid, responsive scroll-driven animations that give your users engaging, app-like web experiences—with only a few lines of CSS. 🔗

Chrome for Developers

6,844,437 次观看 • 1 年前

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀

jhey ʕ•ᴥ•ʔ

142,254 次观看 • 2 年前

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

183,803 次观看 • 7 个月前

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

Soren

21,757 次观看 • 7 个月前

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

jhey ʕ•ᴥ•ʔ

258,622 次观看 • 2 年前

Got an image that should be pixel..y? Like a QR code? Make sure it *stays* pixely then. It's just a single CSS property away.

Got an image that should be pixel..y? Like a QR code? Make sure it stays pixely then. It's just a single CSS property away.

Frontend Masters 💻✨

61,064 次观看 • 1 年前

a breakdown of how to cook letters with CSS put a little spin on it 👨‍🍳

a breakdown of how to cook letters with CSS put a little spin on it 👨‍🍳

jhey ʕ•ᴥ•ʔ

62,676 次观看 • 1 年前

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS

Rebane

1,073,664 次观看 • 3 个月前

it's a combo of css pow() + clamp() that makes it possible 👨‍🍳

it's a combo of css pow() + clamp() that makes it possible 👨‍🍳

jhey ʕ•ᴥ•ʔ

26,199 次观看 • 1 个月前

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Wes Bos

31,135 次观看 • 1 年前