Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,035 subscribers

79,932 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieKunstBildung
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

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 🚀

Profilbild von JEM
JEMvor 1 Jahr

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

Profilbild von Diligentic Infotech Pvt. Ltd.
Diligentic Infotech Pvt. Ltd.vor 1 Jahr

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!

Profilbild von Lars Ejaas 👨‍💻𝕏
Lars Ejaas 👨‍💻𝕏vor 1 Jahr

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

Profilbild von Agora
Agoravor 1 Jahr

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

Profilbild von Alex Rothuis
Alex Rothuisvor 1 Jahr

This looks amazing

Profilbild von Aditya Chaudhary
Aditya Chaudharyvor 1 Jahr

Looks so cool!

Profilbild von Naif Alotaibi
Naif Alotaibivor 1 Jahr

Beautiful work

Profilbild von Gurkaran Singh
Gurkaran Singhvor 1 Jahr

This guy is abusing GSAP, making it irrelevant 😂😂

Profilbild von Will
Willvor 1 Jahr

Beautiful

Ähnliche Videos

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) ✨
0:20

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

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

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,119 Aufrufe • vor 2 Jahren

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%; }
0:24

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

115,929 Aufrufe • vor 7 Monaten

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; }}
0:39

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

125,904 Aufrufe • vor 1 Jahr

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
0:36

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,266 Aufrufe • vor 2 Jahren

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
0:33

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,890 Aufrufe • vor 2 Jahren

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! 👇
0:54

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,664 Aufrufe • vor 2 Jahren

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; } }
0:43

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

245,925 Aufrufe • vor 2 Jahren

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥
0:46

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

jhey ʕ•ᴥ•ʔ

114,209 Aufrufe • vor 2 Jahren

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! 👇
0:23

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,770 Aufrufe • vor 2 Jahren

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 🤙
0:34

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

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 👇
0:29

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

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) }
0:28

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

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! 👇
1:22

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

416,886 Aufrufe • vor 2 Jahren

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! 👇
0:26

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,112 Aufrufe • vor 2 Jahren

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; }}
0:30

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

117,737 Aufrufe • vor 1 Jahr

O küfür, 0 kadın, 0 araba, 0 autotune, 0 rolex, 0 kokain, 0 ot, 0 gucci, 0 balenciaga, 0 dubai, 0 hata.. 100% derin hissiyat ve kalite..
4:34

O küfür, 0 kadın, 0 araba, 0 autotune, 0 rolex, 0 kokain, 0 ot, 0 gucci, 0 balenciaga, 0 dubai, 0 hata.. 100% derin hissiyat ve kalite..

Rap Culture

32,914 Aufrufe • vor 3 Monaten

Key Animation: Kazooma (0:00 - 0:06) Josh Aguilar (0:06 - 0:20) misozune (0:20 - 0:52) Gareth Wong (0:52 - 1:00) Series: Castlevania: Nocturne (2023)
1:00

Key Animation: Kazooma (0:00 - 0:06) Josh Aguilar (0:06 - 0:20) misozune (0:20 - 0:52) Gareth Wong (0:52 - 1:00) Series: Castlevania: Nocturne (2023)

randomsakuga

291,471 Aufrufe • vor 2 Jahren

easing is everything use different CSS timing functions per axis for custom motion paths 👨‍🍳 .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) }
0:40

easing is everything use different CSS timing functions per axis for custom motion paths 👨‍🍳 .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 ʕ•ᴥ•ʔ

270,277 Aufrufe • vor 7 Monaten

0% nudity 0% swearing 0% violence 100% talent
0:29

0% nudity 0% swearing 0% violence 100% talent

Femme Crave

15,617 Aufrufe • vor 10 Monaten