Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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 Aufrufe • vor 2 Jahren •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 Kommentare

Profilbild von Simone Maranzana 🦋

Simone Maranzana 🦋vor 2 Jahren

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

Profilbild von Bug Buster 🐞 CLONE

Bug Buster 🐞 CLONEvor 2 Jahren

Codepen link?

Profilbild von Marx Attack

Marx Attackvor 2 Jahren

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

Profilbild von Timo

Timovor 2 Jahren

Space odyssey 2001 vibes ❤️

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

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

Profilbild von Rodrigo Calix

Rodrigo Calixvor 2 Jahren

I love this!

Profilbild von Saïd Aitmbarek

Saïd Aitmbarekvor 2 Jahren

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

Profilbild von checked

checkedvor 2 Jahren

How does it perform?

Profilbild von moralesnery

moralesneryvor 2 Jahren

This brings back memories

Ähnliche Videos

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

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 Aufrufe • vor 22 Tagen

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

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,829 Aufrufe • vor 3 Jahren

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

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 🍉

89,793 Aufrufe • vor 2 Jahren

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 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 🔥

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

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

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

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

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

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

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

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,302,914 Aufrufe • vor 5 Monaten

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

"They had two moments of magic" 🪄 Roy Keane and Ashley Young react to Aston Villa 2-1 Manchester United 🔊

"They had two moments of magic" 🪄 Roy Keane and Ashley Young react to Aston Villa 2-1 Manchester United 🔊

Sky Sports Premier League

70,669 Aufrufe • vor 8 Monaten

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

the background track, the reactions and the editing… this is like one of those top 10 biggest betrayals compilation on youtube

the background track, the reactions and the editing… this is like one of those top 10 biggest betrayals compilation on youtube

cat ✯🐈‍⬛

80,556 Aufrufe • vor 1 Jahr