Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Container scroll-state queries let you apply styles to elements based on the container's scroll state — stuck, snapped, or scrollable👇 .section-header { ... container-type: scroll-state; container-name: sticky-hd; } @ container sticky-hd scroll-state(stuck: top) { ... } #CSS

KaraBharat's profile picture

Bharat Kara

4,223 subscribers

26,535 Aufrufe • vor 2 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @​container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }
0:36

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @​container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }

jhey ʕ•ᴥ•ʔ

138,071 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

#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 Aufrufe • vor 1 Jahr

CSS Tip! ✨ You can make your component styles portable with container queries 😎 Change a card layout based on size 🔥 Remove button text when it's small 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below 👇
0:28

CSS Tip! ✨ You can make your component styles portable with container queries 😎 Change a card layout based on size 🔥 Remove button text when it's small 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

311,452 Aufrufe • vor 2 Jahren

Improved data table filters on mobile 🔥 A progressive gradient appears at the container edges when there's more content to scroll. Let me know what you think ↩️
0:27

Improved data table filters on mobile 🔥 A progressive gradient appears at the container edges when there's more content to scroll. Let me know what you think ↩️

kian bazza

34,526 Aufrufe • vor 1 Jahr

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 ʕ•ᴥ•ʔ

495,420 Aufrufe • vor 2 Jahren

We added two properties to the Scroll Constraint options that you can animate and control with the State Machine: - Scroll Percent X/Y: 0-100% dynamically computed based on the viewport and content size - Scroll Index: scroll to a specific child item by index - See docs for details:
0:28

We added two properties to the Scroll Constraint options that you can animate and control with the State Machine: - Scroll Percent X/Y: 0-100% dynamically computed based on the viewport and content size - Scroll Index: scroll to a specific child item by index - See docs for details:

Rive

16,536 Aufrufe • vor 1 Jahr

Weather App’s Style Sticky Scroll Section Using SwiftUI
0:28

Weather App’s Style Sticky Scroll Section Using SwiftUI

Kavsoft

34,185 Aufrufe • vor 18 Tagen

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,261 Aufrufe • vor 8 Monaten

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,140 Aufrufe • vor 7 Monaten

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @​keyframes bright { 50% { opacity: 1; }}
0:25

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @​keyframes bright { 50% { opacity: 1; }}

jhey ʕ•ᴥ•ʔ

366,000 Aufrufe • vor 1 Jahr

Create a visually appealing and animated sticky scroll header effect that uses interchangeable carousel cards. For more 👇
0:21

Create a visually appealing and animated sticky scroll header effect that uses interchangeable carousel cards. For more 👇

Kavsoft

16,497 Aufrufe • vor 1 Jahr

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,603 Aufrufe • vor 7 Monaten

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,010 Aufrufe • vor 1 Jahr

if i see any component being hard clipped by a scroll container i get the ick. tiny detail from when i was working on the first version of soundxyz in 2021
0:21

if i see any component being hard clipped by a scroll container i get the ick. tiny detail from when i was working on the first version of soundxyz in 2021

pugson

27,586 Aufrufe • vor 10 Monaten

How about a container campground or container condominium?
0:29

How about a container campground or container condominium?

PHYSICSAINS

277,114 Aufrufe • vor 6 Monaten

more CSS <table> tricks 👇 stick the first row using <thead> so you don't lose context, and give it a margin so you don't lose the last row on scroll thead { position: sticky; top: var(--header-height); margin-bottom: 1lh; /* or whatever row height */ }
0:30

more CSS <table> tricks 👇 stick the first row using <thead> so you don't lose context, and give it a margin so you don't lose the last row on scroll thead { position: sticky; top: var(--header-height); margin-bottom: 1lh; /* or whatever row height */ }

jhey ʕ•ᴥ•ʔ

122,020 Aufrufe • vor 1 Jahr

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇
0:45

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

228,710 Aufrufe • vor 3 Jahren

- Fully loaded 40ft container fell on a car at Alapere area of Ogudu, Lagos State ; k!lling a woman.
0:35

- Fully loaded 40ft container fell on a car at Alapere area of Ogudu, Lagos State ; k!lling a woman.

Postsubman

288,563 Aufrufe • vor 2 Jahren