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

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

На главную

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's profile picture

Kavsoft

28,649 subscribers

20,540 просмотров • 6 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

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

I built a thing last week: it’s a Scroll-Driven View Transition. Yep, you read that right: the View Transition is controlled by you scrolling! There’s a lot to tell about this one, so let’s take a look …
0:13

I built a thing last week: it’s a Scroll-Driven View Transition. Yep, you read that right: the View Transition is controlled by you scrolling! There’s a lot to tell about this one, so let’s take a look …

Bramus

113,459 просмотров • 2 лет назад

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

The Scroll network is now available in Ledger Live! That means you can securely manage your $ETH, $USDT, and $USDC via the Scroll network through the Ledger ecosystem.
0:15

The Scroll network is now available in Ledger Live! That means you can securely manage your $ETH, $USDT, and $USDC via the Scroll network through the Ledger ecosystem.

Ledger

52,167 просмотров • 1 год назад

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

`overscroll-x-contain` should be the default for any horizontal scroll container on the web. by default sideways trackpad swipes trigger browser back navigation and users hate this add this CSS and respect their intent .scroll-container { overscroll-behavior-x: contain; }
0:11

`overscroll-x-contain` should be the default for any horizontal scroll container on the web. by default sideways trackpad swipes trigger browser back navigation and users hate this add this CSS and respect their intent .scroll-container { overscroll-behavior-x: contain; }

OPM

34,747 просмотров • 4 месяцев назад

This is the most frustrating page to scroll on GitHub. Every single day I get to play the get-your-mouse-to-the-exact-correct-position game. The easiest solution is to disable scroll wheel zooming on the stupid graphical view, I've never wanted to zoom that in my life.
0:14

This is the most frustrating page to scroll on GitHub. Every single day I get to play the get-your-mouse-to-the-exact-correct-position game. The easiest solution is to disable scroll wheel zooming on the stupid graphical view, I've never wanted to zoom that in my life.

Mitchell Hashimoto

24,860 просмотров • 2 лет назад

Smooth UX detail that AI agents can't do (yet) When the active tab is at the scroll edge, we detect which side it touches and change its shape.
0:13

Smooth UX detail that AI agents can't do (yet) When the active tab is at the scroll edge, we detect which side it touches and change its shape.

define

25,032 просмотров • 3 месяцев назад

Сlaude Design + Claude Opus 4.7 is so cracked at Scroll-based Animated landing pages. 🤯 and anyone can achieve the same results. Here's the prompt ↓
0:12

Сlaude Design + Claude Opus 4.7 is so cracked at Scroll-based Animated landing pages. 🤯 and anyone can achieve the same results. Here's the prompt ↓

Viktor Oddy

51,099 просмотров • 3 месяцев назад

Here comes the 12th #Sushi30over30! 📜 Scroll Scroll 🌐 Scroll is a native zkEVM - the L2 network built by Ethereum devs for Ethereum devs 🔄 Swap & LP on Sushi Join the Daily Quest powered by Galxe 👾: 👉 LIKE & RT this tweet 🍣 FOLLOW Sushi.com & Scroll Prizes: 💥 3x top 3 posts winners get $100 in $SUSHI 🏆 3x streak winners grab $300 in $SUSHI Full blog: #Layer2 #Ethereum #zkevm
0:17

Here comes the 12th #Sushi30over30! 📜 Scroll Scroll 🌐 Scroll is a native zkEVM - the L2 network built by Ethereum devs for Ethereum devs 🔄 Swap & LP on Sushi Join the Daily Quest powered by Galxe 👾: 👉 LIKE & RT this tweet 🍣 FOLLOW Sushi.com & Scroll Prizes: 💥 3x top 3 posts winners get $100 in $SUSHI 🏆 3x streak winners grab $300 in $SUSHI Full blog: #Layer2 #Ethereum #zkevm

Sushi.com

37,397 просмотров • 2 лет назад

There isn’t a single line of SwiftUI here, this is a pure UIKit implementation on iOS 18. A fully custom navigation bar that hooks into the nearest UIScrollView to show the scroll-edge effect only once the user starts scrolling. Buttons are fully custom and display a nice brightness effect (CAFilter) when touched.
0:14

There isn’t a single line of SwiftUI here, this is a pure UIKit implementation on iOS 18. A fully custom navigation bar that hooks into the nearest UIScrollView to show the scroll-edge effect only once the user starts scrolling. Buttons are fully custom and display a nice brightness effect (CAFilter) when touched.

Julien Sagot

30,282 просмотров • 6 месяцев назад

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
0:15

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 просмотров • 10 месяцев назад

you don't need threejs for this effect just apply `perspective` to the container and animate each image with `translate3d(...)` over time, where depth is something like `z = z0 + speed * dt` and the rest is handled by the browser easy to map opacity or scroll to speed too
0:15

you don't need threejs for this effect just apply `perspective` to the container and animate each image with `translate3d(...)` over time, where depth is something like `z = z0 + speed * dt` and the rest is handled by the browser easy to map opacity or scroll to speed too

daniel petho

116,696 просмотров • 5 месяцев назад

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

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);
0:10

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);

jhey ʕ•ᴥ•ʔ

78,350 просмотров • 1 год назад

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

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">
0:19

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">

jhey ʕ•ᴥ•ʔ

307,283 просмотров • 2 лет назад

Pigment is such a great tool for original colour palettes. Love the infinite scroll and the playful ui elements.
0:11

Pigment is such a great tool for original colour palettes. Love the infinite scroll and the playful ui elements.

David Kirschberg

54,424 просмотров • 3 лет назад

There is no perfect stablecoin. But we think we’re the closest. Introducing USX, the first neodollar by Scroll. Spendable IRL, gasless, private, and earns est. 12% when you stake:
0:11

There is no perfect stablecoin. But we think we’re the closest. Introducing USX, the first neodollar by Scroll. Spendable IRL, gasless, private, and earns est. 12% when you stake:

USX

64,001 просмотров • 9 месяцев назад

How I built with Claude 👇 1. Prompt: "Build a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites have
0:14

How I built with Claude 👇 1. Prompt: "Build a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites have

FHILY👑

324,492 просмотров • 2 месяцев назад