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

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

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

jhey ʕ•ᴥ•ʔ

146,397 subscribers

79,987 просмотров • 2 лет назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля jhey ▲🐻🎈

jhey ▲🐻🎈2 лет назад

It's one DOM update and some CSS If View Transitions aren't supported, jus' make the DOM update without them 🤙 Here's the @CodePen 🚀

Фото профиля JEM

JEM2 лет назад

took me forever to find, something with the initial theme it seems once I click it has the correct theme colors for the button

Фото профиля Diligentic Infotech Pvt. Ltd.

Diligentic Infotech Pvt. Ltd.2 лет назад

Love how View Transitions add that seamless touch to theme-switching! 🔥 Definitely a major boost for improving user experience. CSS is evolving in amazing ways!

Фото профиля Lars Ejaas 👨‍💻𝕏

Lars Ejaas 👨‍💻𝕏2 лет назад

Come on Firefox you can do this! 🫶 You do not want to be the only browser without View Transitions!

Фото профиля Agora

Agora2 лет назад

👀 Wow, this looks great! We're excited to see how developers use this in web apps.

Фото профиля Alex Rothuis

Alex Rothuis2 лет назад

This looks amazing

Фото профиля Aditya Chaudhary

Aditya Chaudhary2 лет назад

Looks so cool!

Фото профиля Naif Alotaibi

Naif Alotaibi2 лет назад

Beautiful work

Фото профиля Gurkaran Singh

Gurkaran Singh2 лет назад

This guy is abusing GSAP, making it irrelevant 😂😂

Фото профиля Will

Will2 лет назад

Beautiful

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

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

jhey ʕ•ᴥ•ʔ

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

lazy exclusion tabs using CSS :has() 🤙 transition custom properties for a clip-path give one a slight delay .track { clip-path: inset(0 var(--x2) 0 var(--x1)); transition: --x1 0.2s, --x2 0.2s 0.1s; } .tabs:has(input:nth-of-type(1):checked) .track { --x1: 0; --x2: 89%; }

lazy exclusion tabs using CSS :has() 🤙 transition custom properties for a clip-path give one a slight delay .track { clip-path: inset(0 var(--x2) 0 var(--x1)); transition: --x1 0.2s, --x2 0.2s 0.1s; } .tabs:has(input:nth-of-type(1):checked) .track { --x1: 0; --x2: 89%; }

jhey ʕ•ᴥ•ʔ

134,390 просмотров • 1 год назад

img { animation: reveal; animation-timeline: view(); 👈 animation-range: entry 0% entry 150%; 👈 } @keyframes reveal { 0% { opacity: 0; filter: brightness(2); scale: 0.9; } }

img { animation: reveal; animation-timeline: view(); 👈 animation-range: entry 0% entry 150%; 👈 } @keyframes reveal { 0% { opacity: 0; filter: brightness(2); scale: 0.9; } }

jhey ʕ•ᴥ•ʔ

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

small details that matter 🧑‍🍳 use CSS pseudoelements to bridge the :hover gap w/ :has() + inset a:has(+ .dots) a::after, .dots + a::after { position: absolute; content: ''; } a:has(+ .dots) a::after { inset: 0 -50% 0 100%; } .dots + a::after { inset: 0 100% 0 -50%; }

small details that matter 🧑‍🍳 use CSS pseudoelements to bridge the :hover gap w/ :has() + inset a:has(+ .dots) a::after, .dots + a::after { position: absolute; content: ''; } a:has(+ .dots) a::after { inset: 0 -50% 0 100%; } .dots + a::after { inset: 0 100% 0 -50%; }

jhey ʕ•ᴥ•ʔ

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

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

126,068 просмотров • 1 год назад

Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan

Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan

jhey ʕ•ᴥ•ʔ

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

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳

jhey ʕ•ᴥ•ʔ

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

You can create the outer radius with CSS alone and no SVG 🤙 1. Create 2 elements 2x the radius size 2. Pin each side 3. Clip segment: clip-path: inset(50% 50% 0 0) 4. Radial gradient mask a pseudo 5. Border the other 6. Flip one side with scale: -1 1; Easier to watch 👇😅

You can create the outer radius with CSS alone and no SVG 🤙 1. Create 2 elements 2x the radius size 2. Pin each side 3. Clip segment: clip-path: inset(50% 50% 0 0) 4. Radial gradient mask a pseudo 5. Border the other 6. Flip one side with scale: -1 1; Easier to watch 👇😅

jhey ʕ•ᴥ•ʔ

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

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

jhey ʕ•ᴥ•ʔ

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

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

those little details™ Scale up and down on scroll with CSS 📜✨ a { animation: scale, scale; animation-direction: normal, reverse; animation-timeline: view(inline); animation-range: entry, exit; } @keyframes scale { 0% { scale: 0; } }

those little details™ Scale up and down on scroll with CSS 📜✨ a { animation: scale, scale; animation-direction: normal, reverse; animation-timeline: view(inline); animation-range: entry, exit; } @keyframes scale { 0% { scale: 0; } }

jhey ʕ•ᴥ•ʔ

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

Future CSS Tip! 🔮 You can create this parallax-like image grid effect using scroll-driven animation and the reusable keyframe technique from the other day 🔥 .collage { height: 200vh; view-timeline: --collage; (The blue dashed element) } .photo { animation-name: travel; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: --collage; animation-range: entry 100% exit 0%; } .photo:nth-of-type(7n + 1):nth-of-type(even) { --vertical: -100%; --horizontal: 100%; } keyframes travel { 0% { translate: 0 0; } 50% { translate: 0 var(--vertical); } 100% { translate: var(--horizontal) var(--vertical); } } CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can create this parallax-like image grid effect using scroll-driven animation and the reusable keyframe technique from the other day 🔥 .collage { height: 200vh; view-timeline: --collage; (The blue dashed element) } .photo { animation-name: travel; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: --collage; animation-range: entry 100% exit 0%; } .photo:nth-of-type(7n + 1):nth-of-type(even) { --vertical: -100%; --horizontal: 100%; } keyframes travel { 0% { translate: 0 0; } 50% { translate: 0 var(--vertical); } 100% { translate: var(--horizontal) var(--vertical); } } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

CSS logo marquee 1. bake the offset into your @keyframes 2. set animation-delay based on duration + item count @keyframes show { 0%, 73% { translate: -10px 30px; } 76%, 97% { translate: 0 0; } 100% { translate: 10px -30px; } } no need for JavaScript 🤙

jhey ʕ•ᴥ•ʔ

75,439 просмотров • 1 год назад

$Switching word combos on scroll with CSS 🖱️ main { animation: switch both steps(3); animation-timeline: view(); } @keyframes switch { to { --i: 3; }} .words__track { translate: 0 calc(var(--i) * -100%); } Result of a DM request 👇$

Switching word combos on scroll with CSS 🖱️ main { animation: switch both steps(3); animation-timeline: view(); } @keyframes switch { to { --i: 3; }} .words__track { translate: 0 calc(var(--i) * -100%); } Result of a DM request 👇

jhey ʕ•ᴥ•ʔ

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

CSS Tip 🤙 You can create this header effect using position: sticky, clip-path, and custom properties 🔥 (Video 👀) header { position: sticky; top: var(--margin); } main { clip-path: inset(var(--header) 0 0 0);) } No mix-blend-mode or animations required ✨ What's the trick then? 🧐 Duplicate the header element first. Then fix the positioning of one behind the content. header[aria-hidden] { position: fixed; top: 0; margin-top: var(--margin); } Clip the top of the content to reveal the fixed header and put a sticky-positioned header inside it that matches up in position and size ✂️ :root { --header: calc(var(--margin) + var(--font-size)); } main { clip-path: inset(var(--header) 0 0 0); } header { position: sticky; top: var(--margin); } Make your life easier with custom properties 🙌 As the body scrolls, the fixed header gets covered by the clipped content and creates the effect ✨ And because the sticky header is "stuck" it reveals itself as the content goes out of view 😍 This one's pretty cool. You can set the font color to whatever you want. At first glance, it looked like it was a mix-blend-mode thing. It doesn't have to be! Think about it and lean into z-indexing 🫶 Watch the video to get an idea of things with the exploding view 🤯 Any questions, etc. let me know! Will likely do a YouTube video on this one too! 🙏 CodePen.IO link below! 👇

CSS Tip 🤙 You can create this header effect using position: sticky, clip-path, and custom properties 🔥 (Video 👀) header { position: sticky; top: var(--margin); } main { clip-path: inset(var(--header) 0 0 0);) } No mix-blend-mode or animations required ✨ What's the trick then? 🧐 Duplicate the header element first. Then fix the positioning of one behind the content. header[aria-hidden] { position: fixed; top: 0; margin-top: var(--margin); } Clip the top of the content to reveal the fixed header and put a sticky-positioned header inside it that matches up in position and size ✂️ :root { --header: calc(var(--margin) + var(--font-size)); } main { clip-path: inset(var(--header) 0 0 0); } header { position: sticky; top: var(--margin); } Make your life easier with custom properties 🙌 As the body scrolls, the fixed header gets covered by the clipped content and creates the effect ✨ And because the sticky header is "stuck" it reveals itself as the content goes out of view 😍 This one's pretty cool. You can set the font color to whatever you want. At first glance, it looked like it was a mix-blend-mode thing. It doesn't have to be! Think about it and lean into z-indexing 🫶 Watch the video to get an idea of things with the exploding view 🤯 Any questions, etc. let me know! Will likely do a YouTube video on this one too! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

tool iteration 👨‍🍳 drag source/destination to refine responsive CSS motion path timings ⚡ .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

tool iteration 👨‍🍳 drag source/destination to refine responsive CSS motion path timings ⚡ .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

jhey ʕ•ᴥ•ʔ

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

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

scroll to type with CSS ✨ p { animation: type steps(124); animation-timeline: --main; background: var(--cursor) calc(var(--pos) * 1ch) 0 / 1ch 1lh no-repeat border-box, var(--txt) 0 0 / calc(var(--pos) * 1ch) 100% no-repeat text; } @keyframes type { to { --pos: 124; }}

scroll to type with CSS ✨ p { animation: type steps(124); animation-timeline: --main; background: var(--cursor) calc(var(--pos) * 1ch) 0 / 1ch 1lh no-repeat border-box, var(--txt) 0 0 / calc(var(--pos) * 1ch) 100% no-repeat text; } @keyframes type { to { --pos: 124; }}

jhey ʕ•ᴥ•ʔ

118,095 просмотров • 1 год назад

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! 👇

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,168 просмотров • 2 лет назад