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

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

На главную

UI && CSS Tip! 🚀 You can use View Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,997 subscribers

232,919 просмотров • 3 лет назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

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

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇
0:15

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇
0:14

Future CSS Tip! 🤞 You could create an image zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇
0:11

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

CSS by T. Afif

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

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }
0:11

one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }

jhey ʕ•ᴥ•ʔ

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

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

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

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔
0:17

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔

Surjith S M ✪

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

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}
0:11

CSS custom props and scroll animation for staggered effects 🤙 h2 { animation: show; animation-timeline: view(); } .char { translate: 0 calc((1 - var(--s)) * 1lh); transition: translate 0.5s calc(sin(var(--i) / var(--t) * 45deg) * 0.5s); } @​keyframes show { to { --s: 1; }}

jhey ʕ•ᴥ•ʔ

32,763 просмотров • 1 год назад

After a long time, I've created a new pen to try out the View Transitions feature and this is really cool! 🚀🚀 CodePen.IO
0:10

After a long time, I've created a new pen to try out the View Transitions feature and this is really cool! 🚀🚀 CodePen.IO

Aysenur

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

You can finally apply transitions on CSS display property. 👀 Combining both transition behavior and starting style, Here's how it works:
0:13

You can finally apply transitions on CSS display property. 👀 Combining both transition behavior and starting style, Here's how it works:

Ali

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

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀
0:16

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀

FHILY👑

97,613 просмотров • 2 месяцев назад

Ever see that buttery number-rolling animation from iOS? You can ship it from Expo. Expo UI exposes SwiftUI's numericText content transition as a modifier. Two modifiers on your Text and you're done. Code below 👇👇
0:12

Ever see that buttery number-rolling animation from iOS? You can ship it from Expo. Expo UI exposes SwiftUI's numericText content transition as a modifier. Two modifiers on your Text and you're done. Code below 👇👇

Nathan Schroeder

24,270 просмотров • 23 дней назад

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔
0:13

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔

Surjith S M ✪

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

Artist & animator yosu shows how to create a zolly shot! Learn how to use keyframes to create cinematic camera motions with Clip Studio Paint!
0:14

Artist & animator yosu shows how to create a zolly shot! Learn how to use keyframes to create cinematic camera motions with Clip Studio Paint!

CLIP STUDIO PAINT

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

Finally, we can fill the gap in React Native by offering a CSS Animation/Transition API in the upcoming Reanimated 4 🐎 Source code 👇🧵
0:11

Finally, we can fill the gap in React Native by offering a CSS Animation/Transition API in the upcoming Reanimated 4 🐎 Source code 👇🧵

Krzysztof Piaskowy

24,178 просмотров • 1 год назад

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.
0:10

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.

Stammy

72,550 просмотров • 1 год назад

In Firefox DevTools you can use a visual editor to adjust CSS clip-path of an element! Love such small features, just like the visual controls for flexbox and grid in Chrome DevTools 🔥
0:15

In Firefox DevTools you can use a visual editor to adjust CSS clip-path of an element! Love such small features, just like the visual controls for flexbox and grid in Chrome DevTools 🔥

Minko Gechev

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