Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,440 subscribers

90,167 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Nine
Ninevor 2 Jahren

The recent animations u r putting out here are magnificent bro

Profilbild von Mery
Meryvor 2 Jahren

These are hitting the spot 👌 nice work like always

Profilbild von Rihan 🇵🇸 | 🦋 rihan.dev
Rihan 🇵🇸 | 🦋 rihan.devvor 2 Jahren

These would be SO nice in Home Assistant

Profilbild von Mark Lyck
Mark Lyckvor 2 Jahren

Make a guide!

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 2 Jahren

When Config is over 🙏

Profilbild von Max Page
Max Pagevor 2 Jahren

brightness overflow

Profilbild von Enicma
Enicmavor 2 Jahren

Awesome details! 😍

Profilbild von Simon Lind
Simon Lindvor 2 Jahren

There it is! Lovely!

Profilbild von LordFonDragon 
LordFonDragon vor 2 Jahren

That's so cool, but you need to make the bottom icon to drag with the bottom part of the slider when overdrag too!

Profilbild von marcog🧉
marcog🧉vor 2 Jahren

Beautiful!

Ähnliche Videos

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

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 ʕ•ᴥ•ʔ

196,528 Aufrufe • vor 1 Jahr

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨
0:38

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

jhey ʕ•ᴥ•ʔ

134,905 Aufrufe • vor 1 Jahr

stop duplicating your navigation for mobile 🤙 use the Popover API and some CSS tricks to make it responsive ✅ sidebar on desktop ✅ drawer on mobile ✅ progressively enhance the drag mechanics
0:29

stop duplicating your navigation for mobile 🤙 use the Popover API and some CSS tricks to make it responsive ✅ sidebar on desktop ✅ drawer on mobile ✅ progressively enhance the drag mechanics

jhey ʕ•ᴥ•ʔ

256,187 Aufrufe • vor 1 Jahr

make it pop™ 🎈 CSS linear() is one of my favorite sleeper additions to the platform 💯
0:32

make it pop™ 🎈 CSS linear() is one of my favorite sleeper additions to the platform 💯

jhey ʕ•ᴥ•ʔ

124,142 Aufrufe • vor 2 Jahren

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?
0:40

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Matthias Martin

13,307 Aufrufe • vor 1 Jahr

those little details™ Scale up and down on scroll with CSS 📜✨ a { animation: scale, scale; animation-direction: normal, reverse; animation-timeline: view(inline); animation-range: entry, exit; } @​keyframes scale { 0% { scale: 0; } }
0:43

those little details™ Scale up and down on scroll with CSS 📜✨ a { animation: scale, scale; animation-direction: normal, reverse; animation-timeline: view(inline); animation-range: entry, exit; } @​keyframes scale { 0% { scale: 0; } }

jhey ʕ•ᴥ•ʔ

246,038 Aufrufe • vor 2 Jahren

Just a little sprinkle of some of the content you can expect lol World of Warcraft
0:23

Just a little sprinkle of some of the content you can expect lol World of Warcraft

Kira Arlayna @Silvermoon 💙🏳️‍🌈

11,199 Aufrufe • vor 11 Monaten

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇
0:30

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,404 Aufrufe • vor 2 Jahren

the little details™ Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬 .character { transition-delay: calc(sin((var(--index) / 12) * 45deg) * 0.475s); }
0:35

the little details™ Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬 .character { transition-delay: calc(sin((var(--index) / 12) * 45deg) * 0.475s); }

jhey ʕ•ᴥ•ʔ

539,647 Aufrufe • vor 2 Jahren

Adding a little ✨funk and soul✨ to your Monday with this animation of 방탄소년단's iconic performance at the 2020 #VMAs 🕺✨
0:29

Adding a little ✨funk and soul✨ to your Monday with this animation of 방탄소년단's iconic performance at the 2020 #VMAs 🕺✨

Video Music Awards

467,691 Aufrufe • vor 2 Jahren

extra little details™ animate a CSS custom property to sync scrollbar-color with the active item ✨ html { scrollbar-color: oklch(65% 0.3 var(--p)) #0000; animation: sync; animation-timeline: --ul; animation-range: entry 50% exit 50% } @​keyframes sync { to { --p: 320; } }
0:33

extra little details™ animate a CSS custom property to sync scrollbar-color with the active item ✨ html { scrollbar-color: oklch(65% 0.3 var(--p)) #0000; animation: sync; animation-timeline: --ul; animation-range: entry 50% exit 50% } @​keyframes sync { to { --p: 320; } }

jhey ʕ•ᴥ•ʔ

61,278 Aufrufe • vor 1 Jahr

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇
0:25

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,349 Aufrufe • vor 2 Jahren

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 ʕ•ᴥ•ʔ

170,474 Aufrufe • vor 2 Monaten

Another week, another micropatch!! Here's Sonii with the details and a little extra Striker Showcase, showing off some of the incredible art of the OS community!
5:12

Another week, another micropatch!! Here's Sonii with the details and a little extra Striker Showcase, showing off some of the incredible art of the OS community!

Omega Strikers

54,199 Aufrufe • vor 3 Jahren

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:
0:45

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

AdirCode

66,805 Aufrufe • vor 3 Jahren

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

36,412 Aufrufe • vor 7 Monaten

✨ Tailwind CSS Tip ✨ You can use peer/{name} to create a beautiful "Pill Menu Animation" like this. × No javascript × No custom styles Comment 👋 and I'll share the code.
0:26

✨ Tailwind CSS Tip ✨ You can use peer/{name} to create a beautiful "Pill Menu Animation" like this. × No javascript × No custom styles Comment 👋 and I'll share the code.

Surjith S M ✪

123,239 Aufrufe • vor 3 Jahren

Sorry, guys from other stacks!!! 🥲 Everything is server-side rendered, high-performing, and written in a few lines of code. It's not a new component. It's just a table, some buttons, and some inputs placed with some CSS utility classes. ✨CSS Zero Datatable✨
0:54

Sorry, guys from other stacks!!! 🥲 Everything is server-side rendered, high-performing, and written in a few lines of code. It's not a new component. It's just a table, some buttons, and some inputs placed with some CSS utility classes. ✨CSS Zero Datatable✨

Lázaro Nixon

10,408 Aufrufe • vor 1 Jahr

Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS
0:23

Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS

Carl 💥 Creative Coding Club

10,756 Aufrufe • vor 2 Jahren