Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

emoji picker sphere 🌐 two-axis css scroll-driven animation spins a 3D globe where "most used" sit along the equator ↓

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

148,261 subscribers

19,876 görüntüleme • 1 gün önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;
0:11

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

Solarin

21,075 görüntüleme • 1 yıl önce

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇
0:15

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,247 görüntüleme • 3 yıl önce

the best emoji picker for macos
0:12

the best emoji picker for macos

Pedro Duarte

13,274 görüntüleme • 1 yıl önce

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().
0:10

💡 CSS Tip! Create a Sticky Header that "sticks"! A fancy effect powered by Scroll-Driven Animations and shape().

CSS by T. Afif

22,524 görüntüleme • 6 ay önce

I put together some Tailwind CSS utilities for masking/fading edges of scroll containers using scroll-driven animations. Link below ↓
0:11

I put together some Tailwind CSS utilities for masking/fading edges of scroll containers using scroll-driven animations. Link below ↓

Tim Wilson

53,030 görüntüleme • 5 ay önce

100% css 0% javascript Pretty cool that you can run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesome
0:14

100% css 0% javascript Pretty cool that you can run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesome

Dev Ed

88,238 görüntüleme • 1 yıl önce

Single-axis scroll containers fix long-standing CSS overflow quirks → Key capabilities ready for testing in Chrome 153 (Beta, Dev, or Canary): 📌 Pair `auto` with `clip` to enable a single-axis scroll container 🔍 Detect support reliably using `@ supports named-feature()` 🚫 Prevent accidental two-dimensional scrollers in your layouts
0:12

Single-axis scroll containers fix long-standing CSS overflow quirks → Key capabilities ready for testing in Chrome 153 (Beta, Dev, or Canary): 📌 Pair `auto` with `clip` to enable a single-axis scroll container 🔍 Detect support reliably using `@ supports named-feature()` 🚫 Prevent accidental two-dimensional scrollers in your layouts

Chrome for Developers

15,752 görüntüleme • 1 ay önce

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate
0:17

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate

Wes Bos

71,941 görüntüleme • 10 ay önce

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇
0:11

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

CSS by T. Afif

35,659 görüntüleme • 2 yıl önce

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙
0:17

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

jhey ʕ•ᴥ•ʔ

121,066 görüntüleme • 2 yıl önce

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏 (now with improved timing ✨)
0:16

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏 (now with improved timing ✨)

jhey ʕ•ᴥ•ʔ

94,110 görüntüleme • 2 yıl önce

#BOUEVE... 🔜 Where will you be watching from across the globe? 🌐
0:12

#BOUEVE... 🔜 Where will you be watching from across the globe? 🌐

AFC Bournemouth 🍒

14,661 görüntüleme • 2 ay önce

Celebrating Shopify merchants around the globe on the most important weekend of the year! Absolutely stunning - thank you Sphere 🤩🌎
0:13

Celebrating Shopify merchants around the globe on the most important weekend of the year! Absolutely stunning - thank you Sphere 🤩🌎

Brennan Loh

52,281 görüntüleme • 2 yıl önce

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:
0:17

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

Ahmad Shadeed

10,533 görüntüleme • 1 yıl önce

Custom React Native emoji picker made for Superchat ✨
0:13

Custom React Native emoji picker made for Superchat ✨

Laurids 🇪🇺🇺🇦

11,442 görüntüleme • 2 yıl önce

"CSS <color-input> Color Picker" by Adam Argyle
0:12

"CSS <color-input> Color Picker" by Adam Argyle

CodePen.IO

12,097 görüntüleme • 11 ay önce