正在加载视频...

视频加载失败

返回首页

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,412 subscribers

78,350 次观看 • 1 年前 •via X (Twitter)

教育科学技术喜剧
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

66,034 次观看 • 1 年前

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,904 次观看 • 1 年前

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}
0:11

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}

jhey ʕ•ᴥ•ʔ

32,781 次观看 • 2 年前

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨
0:17

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨

jhey ʕ•ᴥ•ʔ

113,111 次观看 • 2 年前

Using a relatively easy glitch in Yoshi's Island, it is possible to underflow the life counter and make it roll over from having 0 lives directly to 999.
0:18

Using a relatively easy glitch in Yoshi's Island, it is possible to underflow the life counter and make it roll over from having 0 lives directly to 999.

Supper Mario Broth

126,648 次观看 • 1 年前

Shine animations in CSS are actually simple to make. .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️
0:16

Shine animations in CSS are actually simple to make. .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️

Ali

10,804 次观看 • 4 个月前

Introducing Citadail OTC A platform for investors to complete P2P Over-the-Counter trades Revenue earned from fees will be used to buy back Citadail Token and invest into upcoming projects powered by Citadail and Griffain!
0:17

Introducing Citadail OTC A platform for investors to complete P2P Over-the-Counter trades Revenue earned from fees will be used to buy back Citadail Token and invest into upcoming projects powered by Citadail and Griffain!

CITADAIL

139,833 次观看 • 1 年前

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️
0:19

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

16,738 次观看 • 4 个月前

Turn one idea into a complete storyboard, then animate it in Seedance 2.0 using a reference image. This ComfyUI workflow uses LLMs to build storyboard scenes and prepare them for Seedance, making the jump from concept to animation much easier. Link below 👇
0:12

Turn one idea into a complete storyboard, then animate it in Seedance 2.0 using a reference image. This ComfyUI workflow uses LLMs to build storyboard scenes and prepare them for Seedance, making the jump from concept to animation much easier. Link below 👇

ComfyUI

74,592 次观看 • 3 个月前

3 Car Class 756/0 FLIRT units enter service on the TAM Valley lines. Captured here while using exclusively battery power to pull away from a station and navigate a neutral section in the overhead, under live overhead they are the fastest accelerating mainline units in the UK.
0:16

3 Car Class 756/0 FLIRT units enter service on the TAM Valley lines. Captured here while using exclusively battery power to pull away from a station and navigate a neutral section in the overhead, under live overhead they are the fastest accelerating mainline units in the UK.

South Wales Metro Updates

11,598 次观看 • 1 年前

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️
0:13

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

67,744 次观看 • 5 个月前

It's easy to counter people who don't know how to use the Smart Pistol effectively Listen to how many shots the first guy fires and how many actually land. That's him spam firing without getting a complete lock. Then look at me waiting for full lock with only 6 rounds left.
0:17

It's easy to counter people who don't know how to use the Smart Pistol effectively Listen to how many shots the first guy fires and how many actually land. That's him spam firing without getting a complete lock. Then look at me waiting for full lock with only 6 rounds left.

Kapt'n Krunch 🛠️⚓

11,984 次观看 • 4 个月前

Be the detail you want to see in the world Custom hybrid UIKit gestures + SwiftUI for all the actual content - both reading/writing from a central observable variable store (not using vermont but a custom library I wrote that’s based off of simple closures and AsyncStream) for completely synced animations. Will share more publicly soon on how it’s built :-)
0:12

Be the detail you want to see in the world Custom hybrid UIKit gestures + SwiftUI for all the actual content - both reading/writing from a central observable variable store (not using vermont but a custom library I wrote that’s based off of simple closures and AsyncStream) for completely synced animations. Will share more publicly soon on how it’s built :-)

Tyler Angert

16,760 次观看 • 7 个月前

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 次观看 • 4 个月前

Whoot! I just learned you can use animatable CSS grid rows to transition an element's height from 0 to auto! Toggle a class and see the magic happen. Thx to Chris Coyier for sharing this little gem. 💯 Video alt: Exampe showing an animated height.
0:12

Whoot! I just learned you can use animatable CSS grid rows to transition an element's height from 0 to auto! Toggle a class and see the magic happen. Thx to Chris Coyier for sharing this little gem. 💯 Video alt: Exampe showing an animated height.

Stefan Judis

238,306 次观看 • 3 年前

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎
0:12

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎

Florin Pop 👨🏻‍💻

29,839 次观看 • 1 年前

Successful folks at are giving away the most beautiful cards in the world to the quick and ambitious! 🚀 Available in around 160 countries 👠 worldwide! Issuer: a bank incorporated in a U.S. territory. ⚡ Sign Up: • Download the Avalanche Card app • Enter your phone number and follow the prompts • Complete KYC verification 🎯 Once verified, start using your virtual card and order a physical card with free DHL shipping! 📬 Fees: • FX conversion: 1% • Monthly fee: $0 • Virtual card issuance: $0 • Physical card issuance: $0 🔥 • Shipping: $0 🚚 Top up USDT, USDC/AVAX and more and enjoy the glossy design and vibrant colors! ✨ Documentation:
0:16

Successful folks at are giving away the most beautiful cards in the world to the quick and ambitious! 🚀 Available in around 160 countries 👠 worldwide! Issuer: a bank incorporated in a U.S. territory. ⚡ Sign Up: • Download the Avalanche Card app • Enter your phone number and follow the prompts • Complete KYC verification 🎯 Once verified, start using your virtual card and order a physical card with free DHL shipping! 📬 Fees: • FX conversion: 1% • Monthly fee: $0 • Virtual card issuance: $0 • Physical card issuance: $0 🔥 • Shipping: $0 🚚 Top up USDT, USDC/AVAX and more and enjoy the glossy design and vibrant colors! ✨ Documentation:

Breaking Moneyverse 🚨 ᴺᵉʷˢ You Need to Know

100,837 次观看 • 1 年前

peak 2026 timeline one guy using claude to yap on social and our agent crunching the odds of a counter strike we are running the numbers on whether she actually drops hard receipts in the next 72h pure game theory human ego wants the drama but legal counsel wants complete silence is the agent cooking or are the lawyers about to fumble the bag drop ur delusion below
0:13

peak 2026 timeline one guy using claude to yap on social and our agent crunching the odds of a counter strike we are running the numbers on whether she actually drops hard receipts in the next 72h pure game theory human ego wants the drama but legal counsel wants complete silence is the agent cooking or are the lawyers about to fumble the bag drop ur delusion below

NeoSoul

16,000 次观看 • 29 天前