Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Kinda related: Inline scroll areas that cut off suck as well. Adding a scroll-driven mask to the top and bottom makes it feel much smoother

flornkm's profile picture

Florian

10,904 subscribers

115,104 görüntüleme • 2 ay önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

inline conversions for measurements make content feel more human nobody wants to google "3 tbsps to ml" mid-scroll
0:10

inline conversions for measurements make content feel more human nobody wants to google "3 tbsps to ml" mid-scroll

Raphael Salaja

14,664 görüntüleme • 1 yıl önce

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

Scroll-based 3d landing page. If you have a GLB/GLTF 3d file, you can ask Omma to build a scroll-based landing page and keep iterating by adding more details.
0:19

Scroll-based 3d landing page. If you have a GLB/GLTF 3d file, you can ask Omma to build a scroll-based landing page and keep iterating by adding more details.

Omma

27,864 görüntüleme • 3 ay önce

Stunning scroll-driven animation on tempo's homepage!
0:15

Stunning scroll-driven animation on tempo's homepage!

Aaron Francis

29,944 görüntüleme • 10 ay önce

Bringing flagship-inspired design to the #OnePlusN6 and giving a premium feel to every swipe, scroll and stare. Learn more:
0:17

Bringing flagship-inspired design to the #OnePlusN6 and giving a premium feel to every swipe, scroll and stare. Learn more:

OnePlus India

55,774 görüntüleme • 20 gün ö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 ʕ•ᴥ•ʔ

120,785 görüntüleme • 1 yıl önce

well well well... AG Sky and AG Scroll keep dominating 👀
0:14

well well well... AG Sky and AG Scroll keep dominating 👀

Fortnite Competitive

47,999 görüntüleme • 1 ay önce

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)
0:11

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)

Framer University

16,369 görüntüleme • 1 yıl önce

sometimes i scroll to the bottom of my downloads and see what bullshit i have down there
0:10

sometimes i scroll to the bottom of my downloads and see what bullshit i have down there

woof "pronouns" woofington

149,087 görüntüleme • 16 gün önce

Wrote about scroll-driven variable fonts. The why, the sticky wrapper pattern, and the weight lens stagger math.
0:19

Wrote about scroll-driven variable fonts. The why, the sticky wrapper pattern, and the weight lens stagger math.

Carmen Ansio

13,282 görüntüleme • 2 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

51,995 görüntüleme • 1 ay önce

If Apple dropped the iPod Classic today, no apps, just a scroll wheel and music, it would fly off the shelves.
0:14

If Apple dropped the iPod Classic today, no apps, just a scroll wheel and music, it would fly off the shelves.

Financial Dystopia

1,038,884 görüntüleme • 7 ay önce

For those who are skeptical, here is a scroll through of the messages with anonymous' identity censored, as well as showing PirateSoftware's handle and account creation date.
0:16

For those who are skeptical, here is a scroll through of the messages with anonymous' identity censored, as well as showing PirateSoftware's handle and account creation date.

Lyric ✨

16,616 görüntüleme • 11 ay önce

🔵 Leaderboard, Leaderboard, who’s the mega earner of them all? Wanna see how much other JumpTankers have already earned with JumpTask and who is in the TOP? Now you can! Open JumpTask, scroll to the bottom of the page, and check out the top five biggest earners! Find the leaderboard here ➡️
0:15

🔵 Leaderboard, Leaderboard, who’s the mega earner of them all? Wanna see how much other JumpTankers have already earned with JumpTask and who is in the TOP? Now you can! Open JumpTask, scroll to the bottom of the page, and check out the top five biggest earners! Find the leaderboard here ➡️

JumpTask

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

Since each detail view is a scroll view, we can easily recreate the same effect by combining scroll geometry and custom scroll target behavior. Result👇
0:18

Since each detail view is a scroll view, we can easily recreate the same effect by combining scroll geometry and custom scroll target behavior. Result👇

Kavsoft

20,540 görüntüleme • 5 ay ö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