Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

don't scroll jack. the users scroll should always map 1:1 with the content moving on the page. otherwise it feels like going from a highway to driving through mud. you can still do very cool transitions without jacking scroll (e.g. below)

benhylak's profile picture

ben hylak

51,672 subscribers

35,849 görüntüleme • 3 ay önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

Just figured out how to do that smooth Apple scroll effect in 2 steps! It came down to two things: 1. Generating a scroll-optimized video with xAI GROK 2. Turning it into frames in v0 so users can actually scroll through it That's it! 🤯 You might wanna save this for your next landing page
3:43

Just figured out how to do that smooth Apple scroll effect in 2 steps! It came down to two things: 1. Generating a scroll-optimized video with xAI GROK 2. Turning it into frames in v0 so users can actually scroll through it That's it! 🤯 You might wanna save this for your next landing page

Safinaz Elhadary

74,362 görüntüleme • 6 ay önce

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS
2:35

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,522 görüntüleme • 1 yıl önce

CSS Tip! 📜 You can create scroll indicators with scroll-driven animations 📍 Reveal a shadow, mask the content, etc. .indicator--top { animation: reveal; animation-timeline: scroll(nearest); animation-range: 0 2rem; } @​keyframes reveal { 0% { scale: 1 0; }} The trick here is to hook into the scroll position of the nearest scroll container with .indicator { animation-timeline: scroll(nearest); } Your reveal animation is going to scale the indicator up from 0 on the y-axis @​keyframes reveal { 0% { scale: 1 0; }} The timeline is however much you want to scroll by before revealing the indicator. In this example, you're saying to reveal the indicator once the scroller has been scrolled by 2rem .indicator--top { animation-range: 0 2rem; } How do you make this work for the opposite indicator? Use animation direction and a range based on the end of the scroller .indicator--bottom { animation-range: calc(100% - var(--scroll-buffer)) 100%; animation-direction: reverse; } You can use this same concept for the different styles to reveal different indicators. The only one that's different is the mask. The mask one animates the mask size across three mask layers and uses a mask composite to exclude the pieces that don't need to be shown 🤙 As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇
1:11

CSS Tip! 📜 You can create scroll indicators with scroll-driven animations 📍 Reveal a shadow, mask the content, etc. .indicator--top { animation: reveal; animation-timeline: scroll(nearest); animation-range: 0 2rem; } @​keyframes reveal { 0% { scale: 1 0; }} The trick here is to hook into the scroll position of the nearest scroll container with .indicator { animation-timeline: scroll(nearest); } Your reveal animation is going to scale the indicator up from 0 on the y-axis @​keyframes reveal { 0% { scale: 1 0; }} The timeline is however much you want to scroll by before revealing the indicator. In this example, you're saying to reveal the indicator once the scroller has been scrolled by 2rem .indicator--top { animation-range: 0 2rem; } How do you make this work for the opposite indicator? Use animation direction and a range based on the end of the scroller .indicator--bottom { animation-range: calc(100% - var(--scroll-buffer)) 100%; animation-direction: reverse; } You can use this same concept for the different styles to reveal different indicators. The only one that's different is the mask. The mask one animates the mask size across three mask layers and uses a mask composite to exclude the pieces that don't need to be shown 🤙 As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

99,355 görüntüleme • 2 yıl önce

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶
0:24

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶

jhey ʕ•ᴥ•ʔ

91,625 görüntüleme • 2 yıl önce

How does Apple make these crazy video transitions as you scroll? Let's recreate it with pure CSS with scroll-driven animations and view-timeline That's right, no scroll event listeners!
3:43

How does Apple make these crazy video transitions as you scroll? Let's recreate it with pure CSS with scroll-driven animations and view-timeline That's right, no scroll event listeners!

Steve (Builder.io)

114,753 görüntüleme • 1 yıl önce

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0:34

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

185,348 görüntüleme • 1 yıl önce

We took the Inertia.js infinite scroll component for 2.0 and turbo boosted it: - ⬆️ Reverse infinite scroll - 👬 Multiple infinite scroll components on the same page - 🔃 *Two way* infinite scroll - 🔗 Syncing page state in URL - 🖱️ Manual mode after X requests 🚀👨‍🚀
1:50

We took the Inertia.js infinite scroll component for 2.0 and turbo boosted it: - ⬆️ Reverse infinite scroll - 👬 Multiple infinite scroll components on the same page - 🔃 *Two way* infinite scroll - 🔗 Syncing page state in URL - 🖱️ Manual mode after X requests 🚀👨‍🚀

Joe Tannenbaum

53,162 görüntüleme • 2 yıl önce

99% Of People Will Scroll Past This Tweet Without Realizing That They Had The Chance To Connect With A Famous Artiste Just Before He Became Famous. If You Are Part Of The 1% That Didn’t Scroll, comment Your Name Below And Claim Your Spot as One Of The First Die - Hards!
1:05

99% Of People Will Scroll Past This Tweet Without Realizing That They Had The Chance To Connect With A Famous Artiste Just Before He Became Famous. If You Are Part Of The 1% That Didn’t Scroll, comment Your Name Below And Claim Your Spot as One Of The First Die - Hards!

Determination Worldwide🌎

147,626 görüntüleme • 1 yıl önce

‼️ Scroll to Translate with Circle To Search lands first on Galaxy S25 Ultra 😍 No more restarting translation every time you scroll. With Circle to Search + Scroll & Translate, you can keep reading, scrolling, even switching apps and the translations never stop. Samsung Galaxy S25 Ultra users running One UI 8 are the first in the world to experience this game-changing update. 🌍📱
0:33

‼️ Scroll to Translate with Circle To Search lands first on Galaxy S25 Ultra 😍 No more restarting translation every time you scroll. With Circle to Search + Scroll & Translate, you can keep reading, scrolling, even switching apps and the translations never stop. Samsung Galaxy S25 Ultra users running One UI 8 are the first in the world to experience this game-changing update. 🌍📱

S M A Sithick

43,253 görüntüleme • 1 yıl önce

Scroll-powered text transitions + scroll-reactive infinite marquee. #gsap
0:28

Scroll-powered text transitions + scroll-reactive infinite marquee. #gsap

Codegrid

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

We asked Tidewave to improve its own homepage with autoplay of videos as we scroll through our features list. It implemented the feature and used contextual browser testing to scroll through the page, check the DOM, and verify it works! 🎯 Coming for Rails and Phoenix... today!
2:06

We asked Tidewave to improve its own homepage with autoplay of videos as we scroll through our features list. It implemented the feature and used contextual browser testing to scroll through the page, check the DOM, and verify it works! 🎯 Coming for Rails and Phoenix... today!

José Valim

20,208 görüntüleme • 1 yıl önce

With the new iOS 17 scroll view APIs, we can create a scroll animation like this with just a few lines of code. For more, check out the video👇
0:32

With the new iOS 17 scroll view APIs, we can create a scroll animation like this with just a few lines of code. For more, check out the video👇

Kavsoft

156,612 görüntüleme • 3 yıl önce

Signull says infinite scroll added $1 trillion market cap to Facebook "It’s a great mobile app, works fast, has infinite scroll, is highly visual, gives you exactly what you want, the algorithm is incredibly powerful" "Infinite scroll changed the entire dynamics of how humans operate on the internet at scale"
0:50

Signull says infinite scroll added $1 trillion market cap to Facebook "It’s a great mobile app, works fast, has infinite scroll, is highly visual, gives you exactly what you want, the algorithm is incredibly powerful" "Infinite scroll changed the entire dynamics of how humans operate on the internet at scale"

cpt dank

27,239 görüntüleme • 6 ay önce

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it (use Canary for the scroll-state() support)
0:22

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it (use Canary for the scroll-state() support)

Adam Argyle

12,330 görüntüleme • 1 yıl önce

Scroll snap + scroll driven animation carousel 💡 in the mobile size it looks a lot like the iOS app switcher eh? try it!?
0:28

Scroll snap + scroll driven animation carousel 💡 in the mobile size it looks a lot like the iOS app switcher eh? try it!?

Adam Argyle

22,607 görüntüleme • 2 yıl önce

Don’t scroll away yet! What would you do if your car got stuck in the mud? 🤔
1:31

Don’t scroll away yet! What would you do if your car got stuck in the mud? 🤔

Grace Gym🏋️‍♀️

194,036 görüntüleme • 2 ay önce

this is how it feels like to scroll twitter today
0:39

this is how it feels like to scroll twitter today

narsa.

2,458,552 görüntüleme • 8 ay önce

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,113 görüntüleme • 2 yıl önce

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @​keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @​keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇
0:36

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @​keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @​keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

496,087 görüntüleme • 2 yıl önce