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

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

На главную

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,379 subscribers

93,311 просмотров • 2 лет назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Simone Maranzana 🦋
Simone Maranzana 🦋2 лет назад

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
Bug Buster 🐞 CLONE2 лет назад

Codepen link?

Фото профиля Marx Attack
Marx Attack2 лет назад

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

Фото профиля Timo
Timo2 лет назад

Space odyssey 2001 vibes ❤️

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈2 лет назад

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
Rodrigo Calix2 лет назад

I love this!

Фото профиля Saïd Aitmbarek
Saïd Aitmbarek2 лет назад

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

Фото профиля checked
checked2 лет назад

How does it perform?

Фото профиля moralesnery
moralesnery2 лет назад

This brings back memories

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

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

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

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

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

jhey ʕ•ᴥ•ʔ

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

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

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 просмотров • 2 лет назад

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 👇
1:10

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 просмотров • 3 лет назад

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 ⭐️
0:27

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 просмотров • 2 лет назад

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
1:01

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 просмотров • 13 дней назад

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.
0:25

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 просмотров • 2 лет назад

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

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 просмотров • 2 лет назад

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

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,768 просмотров • 2 лет назад

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

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 просмотров • 2 лет назад

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

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 просмотров • 6 месяцев назад

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

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

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

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

Michael McCarthy

50,380 просмотров • 1 год назад

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.
2:18

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 просмотров • 6 месяцев назад

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.
1:44

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 просмотров • 6 месяцев назад

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 👇🤓
0:31

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 просмотров • 2 лет назад

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,292 просмотров • 3 лет назад