Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

Love riffin' on stuff like this 🤙 – 1 element – 2 CSS background-images – 1 background-blend-mode – 1 filter – < 10 lines of JavaScript Magic! 🪄

jhey ʕ•ᴥ•ʔ

146,379 subscribers

93,311 görüntüleme • 2 yıl önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 Yorum

Simone Maranzana 🦋 profil fotoğrafı

Simone Maranzana 🦋2 yıl önce

Man, it's literally my website header just like it was two years ago before I remade it with WebGL! 😅 It's an amazing effect, by the way

Bug Buster 🐞 CLONE profil fotoğrafı

Bug Buster 🐞 CLONE2 yıl önce

Codepen link?

Marx Attack profil fotoğrafı

Marx Attack2 yıl önce

i try my best, thanks for the inspiration ô.ô

Timo profil fotoğrafı

Timo2 yıl önce

Space odyssey 2001 vibes ❤️

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈2 yıl önce

A 5-minute mess about 😁 I need to put a proper configurable demo out there so people can mess around with it 💯 Using DevTools color picker is pretty fun on this one

Rodrigo Calix profil fotoğrafı

Rodrigo Calix2 yıl önce

I love this!

Saïd Aitmbarek profil fotoğrafı

Saïd Aitmbarek2 yıl önce

awesome work, I may need something similar to animate home page😊

checked profil fotoğrafı

checked2 yıl önce

How does it perform?

moralesnery profil fotoğrafı

moralesnery2 yıl önce

This brings back memories

Benzer Videolar

image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙

image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙

jhey ʕ•ᴥ•ʔ

108,894 görüntüleme • 1 yıl önce

css mix-blend-mode + svg filters + mess w/ contrast, etc. love stuff like this when it comes up 🙏

css mix-blend-mode + svg filters + mess w/ contrast, etc. love stuff like this when it comes up 🙏

jhey ʕ•ᴥ•ʔ

14,210 görüntüleme • 2 ay önce

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

208,444 görüntüleme • 2 yıl önce

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video / view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

408,944 görüntüleme • 3 yıl önce

Didn't need JavaScript for this one 🤙 The 3D exploded view is powered by CSS :has() && custom properties 😎 :root:has(#explode:checked) { --explode: 1; } .slides { scale: calc(1 - (var(--explode) * 0.55)); transform: rotateX(calc(var(--explode) * -24deg))...; } Use scope ⭐️

Didn't need JavaScript for this one 🤙 The 3D exploded view is powered by CSS :has() && custom properties 😎 :root:has(#explode:checked) { --explode: 1; } .slides { scale: calc(1 - (var(--explode) * 0.55)); transform: rotateX(calc(var(--explode) * -24deg))...; } Use scope ⭐️

jhey ʕ•ᴥ•ʔ

96,213 görüntüleme • 2 yıl önce

new feature in opencode v2: low verbosity mode to hide all the crazy stuff that goes on before: <thousands of shell output, etc> now: + 1 command, 1 edit, 2 thoughts, 3 reads

new feature in opencode v2: low verbosity mode to hide all the crazy stuff that goes on before: <thousands of shell output, etc> now: + 1 command, 1 edit, 2 thoughts, 3 reads

James Long

49,446 görüntüleme • 13 gün önce

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,063 görüntüleme • 2 yıl önce

I made a video of all of Sukuna's voice lines in the latest opisode with nearly no background music or noise PART 1

I made a video of all of Sukuna's voice lines in the latest opisode with nearly no background music or noise PART 1

No Name 🍉

90,081 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 🔥

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,768 görüntüleme • 2 yıl önce

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

413,745 görüntüleme • 2 yıl önce

Towanda surprised Toni on the last night of tour and pulled out her background attire to hit her 1 2 step onstage #TheBraxtons

Towanda surprised Toni on the last night of tour and pulled out her background attire to hit her 1 2 step onstage #TheBraxtons

Nicole

412,685 görüntüleme • 6 ay önce

i've experimented with a fan out pattern from plan mode to parallel agent. spend a lot of time upfront refining the plan, then hand off to background 1. generate plan 2. ask cursor to break down plan to isolated, independent tasks 3. spawn background agents using MCP server

i've experimented with a fan out pattern from plan mode to parallel agent. spend a lot of time upfront refining the plan, then hand off to background 1. generate plan 2. ask cursor to break down plan to isolated, independent tasks 3. spawn background agents using MCP server

eric zakariasson

73,238 görüntüleme • 1 yıl önce

Young German girl is only 1 of 2 children that speak German in her school. 95% have a migrant background.

Young German girl is only 1 of 2 children that speak German in her school. 95% have a migrant background.

Michael McCarthy

50,380 görüntüleme • 1 yıl önce

Greatest songs Greatest background score Greatest love story with interval twist Finally, greatest love story film from Tier-1 heroes, releasing on April-23rd 2026.

Greatest songs Greatest background score Greatest love story with interval twist Finally, greatest love story film from Tier-1 heroes, releasing on April-23rd 2026.

Legend Prabhas Fan 🇮🇳

20,800 görüntüleme • 6 ay önce

On Xavier Dolan’s birthday, we revisit this iconic and beautiful scene from 'Mommy' (2014) with Oasis’ "Wonderwall" playing in the background, where the aspect ratio shifted from 1:1 to 1.85:1.

On Xavier Dolan’s birthday, we revisit this iconic and beautiful scene from 'Mommy' (2014) with Oasis’ "Wonderwall" playing in the background, where the aspect ratio shifted from 1:1 to 1.85:1.

Lost In Film

1,306,200 görüntüleme • 6 ay önce

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,786 görüntüleme • 2 yıl önce

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,292 görüntüleme • 3 yıl önce