Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 год назад •via X (Twitter)

ОбразованиеИскусствоНаука и технологии
LIVE

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() ✨
0:20

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.
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 просмотров • 2 месяцев назад

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 просмотров • 3 лет назад

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 просмотров • 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.
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 просмотров • 1 год назад

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 просмотров • 23 дней назад

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 просмотров • 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. 🔗
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 просмотров • 1 год назад

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 просмотров • 7 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 7 месяцев назад

"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 просмотров • 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.
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 просмотров • 1 год назад

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 просмотров • 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
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,664 просмотров • 3 месяцев назад

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,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
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 просмотров • 1 год назад