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

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

На главную

🖱 Scrub through a CSS @‍keyframe with an element's scroll position. What do you think of this effect? Is it OK when very subtle?

wesbos's profile picture

Wes Bos

435,924 subscribers

44,261 просмотров • 1 год назад •via X (Twitter)

ОбразованиеИскусствоНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

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

Фото профиля mert
mert1 год назад

great method! btw what's the tool that you're using at 0:57? it looks super useful.

Фото профиля Wes Bos
Wes Bos1 год назад

Scroll Driven Animations chrome dev tools plugin from @bramus - a must have when learning + debugging

Фото профиля Ravavyr
Ravavyr1 год назад

personally, this is just too much movement as i scroll

Фото профиля CRANQ
CRANQ1 год назад

Looks pretty damn cool - Quite like an interactive website.

Фото профиля Matias Baldanza.dev 😁 ⚛️
Matias Baldanza.dev 😁 ⚛️1 год назад

Stop trying to bring back <marquee>. Not gonna happen. 😁 (jk aside, it's pretty cool, when used appropriately.)

Фото профиля Adam Leis
Adam Leis1 год назад

animation-timeline is one of my favorite modern CSS features ♥ that and custom props/variables Good info to have 👍

Фото профиля Marlon Stevenson
Marlon Stevenson1 год назад

I like these types of designs. Looks very slick.

Фото профиля Constantin 🔥
Constantin 🔥1 год назад

Very nice, but important to not overdo it throughout the page.

Фото профиля The Fianchetto
The Fianchetto1 год назад

This is so cool! 😎

Фото профиля Daniel Schwarz
Daniel Schwarz1 год назад

Way too much movement

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

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳
0:32

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

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

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇
0:27

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

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

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

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

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙
0:26

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

jhey ʕ•ᴥ•ʔ

57,993 просмотров • 1 год назад

CSS container query for when an element is stuck with position: sticky 🔥 nav { container-type: scroll-state; } @​container scroll-state(stuck: top) { .nav__content { --expand: 1; } } use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎
0:29

CSS container query for when an element is stuck with position: sticky 🔥 nav { container-type: scroll-state; } @​container scroll-state(stuck: top) { .nav__content { --expand: 1; } } use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎

jhey ʕ•ᴥ•ʔ

88,665 просмотров • 1 год назад

One of Apple's tricks is to swap images on scroll 📜 You could do it with CSS scroll animation. Translate a track of images with steps ease! ⭐️ .track { animation: play steps(63); animation-timeline: --head; } @​keyframes play { to { translate: 0 -6300%; }} Watch this 👇
0:37

One of Apple's tricks is to swap images on scroll 📜 You could do it with CSS scroll animation. Translate a track of images with steps ease! ⭐️ .track { animation: play steps(63); animation-timeline: --head; } @​keyframes play { to { translate: 0 -6300%; }} Watch this 👇

jhey ʕ•ᴥ•ʔ

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

the 3955's sensor center offset implementation is NOT doing what you think it is and this 100% proves it by comparing it to my prototype with an actual virtual sensor offset. It seems like it's just an x-axis DPI scaling to VAGUELY approximate the effect of a different sensor position (but it's way off).
9:48

the 3955's sensor center offset implementation is NOT doing what you think it is and this 100% proves it by comparing it to my prototype with an actual virtual sensor offset. It seems like it's just an x-axis DPI scaling to VAGUELY approximate the effect of a different sensor position (but it's way off).

bardOZ (Giovanni Laerte Frongia)

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

What an unusual idea. Do you think this is a waste of time?
1:01

What an unusual idea. Do you think this is a waste of time?

Arrayan Taysir

1,638,890 просмотров • 11 месяцев назад

What an unusual idea. Do you think this is a waste of time?
1:01

What an unusual idea. Do you think this is a waste of time?

Ayu D. Palupi

6,701,981 просмотров • 1 год назад

This is very good, what do you think?
0:21

This is very good, what do you think?

Ophelia Khaki

396,954 просмотров • 12 дней назад

Create engaging, scrolly-telling experiences with just a single line of CSS ✨ The new Scroll-Triggered Animations feature lets you trigger an animation when an element scrolls into view, delivering high performance with ease →
1:29

Create engaging, scrolly-telling experiences with just a single line of CSS ✨ The new Scroll-Triggered Animations feature lets you trigger an animation when an element scrolls into view, delivering high performance with ease →

Chrome for Developers

37,753 просмотров • 8 месяцев назад

This is what happens when a quantum wave-function hits a wall that it does not have enough energy to cross. Part of it goes through anyway. This is the famous "tunnel-effect". A particle without quantum properties cannot do that.
0:33

This is what happens when a quantum wave-function hits a wall that it does not have enough energy to cross. Part of it goes through anyway. This is the famous "tunnel-effect". A particle without quantum properties cannot do that.

Sabine Hossenfelder

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

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

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

OK here is another dissection of the disaster. What do you think?
0:34

OK here is another dissection of the disaster. What do you think?

USMC Lady Vet 🇺🇸

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

This child has a condition where her head weighs up to 7lbs. It’s obviously a hindrance and the mother has to be very careful. A lot of people think you shouldn’t put a kid through this but what if the child is mostly happy and ok. Where do you draw the line?! It is called a hydrocephalus baby. This video breaks my heart honestly.
0:38

This child has a condition where her head weighs up to 7lbs. It’s obviously a hindrance and the mother has to be very careful. A lot of people think you shouldn’t put a kid through this but what if the child is mostly happy and ok. Where do you draw the line?! It is called a hydrocephalus baby. This video breaks my heart honestly.

Suzee Q

193,178 просмотров • 7 месяцев назад

been working on a cs2 site with some tools i built - figured i'd share it! it has a demo viewer where you can scrub through pro matches, and an AI match predictor still early but check it out and lmk what you think i'd rly appreciate it 🙏
0:46

been working on a cs2 site with some tools i built - figured i'd share it! it has a demo viewer where you can scrub through pro matches, and an AI match predictor still early but check it out and lmk what you think i'd rly appreciate it 🙏

dAVE

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

Doug Ford says he negotiates through a position of strength because that's what President Trump respects. Do you think Trump has any respect for this man? 🤔
0:30

Doug Ford says he negotiates through a position of strength because that's what President Trump respects. Do you think Trump has any respect for this man? 🤔

Bret 🍁

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