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

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

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

На главную

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

146,338 subscribers

306,369 просмотров • 7 месяцев назад •via X (Twitter)

Искусство Наука и технологии

Anya Rossi• Live Now

Private livecam show

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

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

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

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

Not many lines for a CSS parallax effect either 🤙 ul { scroll-padding-inline: calc(50% - var(-card) * 0.5); } img { animation: para; animation-timeline: --item; } @keyframes para { cover 100% { translate: calc(100% - var(--card)) -50%; }}

Not many lines for a CSS parallax effect either 🤙 ul { scroll-padding-inline: calc(50% - var(-card) * 0.5); } img { animation: para; animation-timeline: --item; } @keyframes para { cover 100% { translate: calc(100% - var(--card)) -50%; }}

jhey ʕ•ᴥ•ʔ

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

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

jhey ʕ•ᴥ•ʔ

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

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

Custom property powered responsive scroll animations with CSS 🔥 .card { animation: morph; animation-timeline: --scroll; } .card--one { --x: -35vw; --r: -10deg; } .card--two { --x: 35vw; } @keyframes morph { 0% { translate: var(--x) var(--y); rotate: var(--r); } }

Custom property powered responsive scroll animations with CSS 🔥 .card { animation: morph; animation-timeline: --scroll; } .card--one { --x: -35vw; --r: -10deg; } .card--two { --x: 35vw; } @keyframes morph { 0% { translate: var(--x) var(--y); rotate: var(--r); } }

jhey ʕ•ᴥ•ʔ

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

neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀

neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀

jhey ʕ•ᴥ•ʔ

77,988 просмотров • 1 год назад

accordion transitions w/ css ::details-content, <details> + <summary> 🧑‍🍳 details:has(~ [open]) { --y: -1; } [open] ~ details { --y: 1; } details { translate: 0 calc(var(--y) * 1rem); } [open]::details-content { height: fit-content; }

accordion transitions w/ css ::details-content, <details> + <summary> 🧑‍🍳 details:has(~ [open]) { --y: -1; } [open] ~ details { --y: 1; } details { translate: 0 calc(var(--y) * 1rem); } [open]::details-content { height: fit-content; }

jhey ʕ•ᴥ•ʔ

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

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

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

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

jhey ʕ•ᴥ•ʔ

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

CSS Trick 🎞️ You can create an infinite marquee/carousel animation without duplicate items 🤙 li { --destination: calc(var(--idx) * -100%); } @keyframes slide { to { translate: var(--destination) 0;}} Animate the items, not the list 😎 Here's the next ! 👇 The main trick here is animating the items and not the list. You can lean into custom properties to work out the origin and destination of an item. Inline some custom properties on the list and the items. Then use these to calculate the origin and the destination for each item in the list ⭐️ li { --origin: calc((var(--count) - var(--index)) * 100%); --destination: calc((var(--index) + 1) * -100%); } The last piece is hooking up the animation li { --duration: calc(var(--speed) * 1s); --delay: calc( (var(--duration) / var(--count)) * var(--index, 0) ); animation: slide var(--duration) calc(var(--delay) - (var(--count) * 0.5s)) infinite linear; } The important part here is using those custom properties to define and calculate the animation properties for the items in the list 🤙 It's hard to cover everyone's use case in one demo 😅 But we try 🙏 As always, any requests, suggestions, questions, etc. Hit me up! 🤙 CodePen.IO link below 👇 p.s Can anyone recommend a decent lavalier microphone so I can record these better on the road 😭

CSS Trick 🎞️ You can create an infinite marquee/carousel animation without duplicate items 🤙 li { --destination: calc(var(--idx) * -100%); } @keyframes slide { to { translate: var(--destination) 0;}} Animate the items, not the list 😎 Here's the next ! 👇 The main trick here is animating the items and not the list. You can lean into custom properties to work out the origin and destination of an item. Inline some custom properties on the list and the items. Then use these to calculate the origin and the destination for each item in the list ⭐️ li { --origin: calc((var(--count) - var(--index)) * 100%); --destination: calc((var(--index) + 1) * -100%); } The last piece is hooking up the animation li { --duration: calc(var(--speed) * 1s); --delay: calc( (var(--duration) / var(--count)) * var(--index, 0) ); animation: slide var(--duration) calc(var(--delay) - (var(--count) * 0.5s)) infinite linear; } The important part here is using those custom properties to define and calculate the animation properties for the items in the list 🤙 It's hard to cover everyone's use case in one demo 😅 But we try 🙏 As always, any requests, suggestions, questions, etc. Hit me up! 🤙 CodePen.IO link below 👇 p.s Can anyone recommend a decent lavalier microphone so I can record these better on the road 😭

jhey ʕ•ᴥ•ʔ

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

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @keyframes t { to { translate: 0 calc(100% - 1lh);}}

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @keyframes t { to { translate: 0 calc(100% - 1lh);}}

jhey ʕ•ᴥ•ʔ

264,492 просмотров • 1 год назад

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

jhey ʕ•ᴥ•ʔ

164,666 просмотров • 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,943 просмотров • 1 год назад

CSS text reveal on scroll 📜 <span style="--start: 210; --end: 280;">details</span> span { animation: reveal; animation-timeline: --section; animation-range: contain calc(var(--start) * 1px) contain calc(var(--end) * 1px); } @keyframes reveal { 0% { opacity: 0.2; }}

CSS text reveal on scroll 📜 <span style="--start: 210; --end: 280;">details</span> span { animation: reveal; animation-timeline: --section; animation-range: contain calc(var(--start) * 1px) contain calc(var(--end) * 1px); } @keyframes reveal { 0% { opacity: 0.2; }}

jhey ʕ•ᴥ•ʔ

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

3D CSS image slider works well on device 🤙 li { --item-width: clamp(120px, 20vmin, 12rem); --radius: calc( (var(--item-width) / sin(var(--inner-angle))) * -1 ); } It's cool how you can use a clamped value with "calc"

3D CSS image slider works well on device 🤙 li { --item-width: clamp(120px, 20vmin, 12rem); --radius: calc( (var(--item-width) / sin(var(--inner-angle))) * -1 ); } It's cool how you can use a clamped value with "calc"

jhey ʕ•ᴥ•ʔ

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

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

jhey ʕ•ᴥ•ʔ

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

CSS Trick! 🎃 You can create a wavey border for elements by layering masks 🎭 Used to create this ghost! 👻 Check the video for an exploding view 🫶 .👻 { --size: 20px; mask: radial-gradient(var(--size) at bottom, transparent 97%, #000), radial-gradient(var(--size) at 25% 50%, #000 97%, transparent); mask-repeat: repeat-x; mask-size: calc(2 * var(--size)) 100%, calc(4 * var(--size)) calc(2 * var(--size)); mask-position: 50% calc(100% - var(--size)), calc(50% - var(--size)) 99%; } That code looks kinda scary! 👻 This is one way you could do things. Check the video again or explode in the demo. One mask cuts out circles from the bottom of the element. The other adds overlaid circles back. And that overlap creates the wavey line you want for the ghost 🤙 Using a custom property you can write once and not have to touch again. Update the custom property to update the wave size as shown in the video 🎬 The last piece of the puzzle is animating the mask-position to create that animation @ keyframes flow { to { mask-position: calc(50% + (var(--size) * 4)) calc(100% - var(--size)), calc((50% - var(--size)) + (var(--size) * 4)) 99%; } } If you play with the demo, you may find some Easter eggs! Shake the ghost and double-tap it 😉 Happy Halloween! 🎃 CodePen.IO link below! 👇

CSS Trick! 🎃 You can create a wavey border for elements by layering masks 🎭 Used to create this ghost! 👻 Check the video for an exploding view 🫶 .👻 { --size: 20px; mask: radial-gradient(var(--size) at bottom, transparent 97%, #000), radial-gradient(var(--size) at 25% 50%, #000 97%, transparent); mask-repeat: repeat-x; mask-size: calc(2 * var(--size)) 100%, calc(4 * var(--size)) calc(2 * var(--size)); mask-position: 50% calc(100% - var(--size)), calc(50% - var(--size)) 99%; } That code looks kinda scary! 👻 This is one way you could do things. Check the video again or explode in the demo. One mask cuts out circles from the bottom of the element. The other adds overlaid circles back. And that overlap creates the wavey line you want for the ghost 🤙 Using a custom property you can write once and not have to touch again. Update the custom property to update the wave size as shown in the video 🎬 The last piece of the puzzle is animating the mask-position to create that animation @ keyframes flow { to { mask-position: calc(50% + (var(--size) * 4)) calc(100% - var(--size)), calc((50% - var(--size)) + (var(--size) * 4)) 99%; } } If you play with the demo, you may find some Easter eggs! Shake the ghost and double-tap it 😉 Happy Halloween! 🎃 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

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

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

jhey ʕ•ᴥ•ʔ

257,886 просмотров • 1 год назад

CSS only number slider using @property, round(), sin() and scroll-driven animation 🤙 @keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

CSS only number slider using @property, round(), sin() and scroll-driven animation 🤙 @keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

jhey ʕ•ᴥ•ʔ

372,529 просмотров • 1 год назад