Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 💀

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

144,239 subscribers

196,528 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimSanatBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 profil fotoğrafı
Prajwal Dhule1 yıl önce

🔥 never stop cooking

Ed profil fotoğrafı
Ed1 yıl önce

You are what @rauchg wishes v0 was

Januario profil fotoğrafı
Januario1 yıl önce

Are we getting spring animations in css anytime soon?

Luis Scura profil fotoğrafı
Luis Scura1 yıl önce

Wow. Nice!

Gabriel Christo profil fotoğrafı
Gabriel Christo1 yıl önce

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

一丝 profil fotoğrafı
一丝1 yıl önce

Does CSSWG have a proposal?

Wadad Parker profil fotoğrafı
Wadad Parker1 yıl önce

Bro is him 🛐

Samuel Gregory profil fotoğrafı
Samuel Gregory1 yıl önce

🤯

knickerbocker.eth profil fotoğrafı
knickerbocker.eth1 yıl önce

This is illegal 🤯

Benzer Videolar

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

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

jhey ʕ•ᴥ•ʔ

90,151 görüntüleme • 2 yıl önce

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.
0:21

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 görüntüleme • 2 ay önce

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

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 görüntüleme • 3 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

57,717 görüntüleme • 1 yıl önce

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.
0:25

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 görüntüleme • 1 yıl önce

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

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 görüntüleme • 22 gün önce

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
6:51

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,671 görüntüleme • 1 yıl önce

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. 🔗
0:48

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 görüntüleme • 1 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

142,254 görüntüleme • 2 yıl önce

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.
0:34

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 görüntüleme • 7 ay önce

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.
0:34

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 görüntüleme • 7 ay önce

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

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

jhey ʕ•ᴥ•ʔ

258,622 görüntüleme • 2 yıl önce

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.
0:20

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 görüntüleme • 1 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

62,571 görüntüleme • 1 yıl önce

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
0:59

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,601 görüntüleme • 3 ay önce

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

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

jhey ʕ•ᴥ•ʔ

26,130 görüntüleme • 1 ay önce

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
2:32

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 görüntüleme • 1 yıl önce