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.

Using the CSS Custom Highlight API to create dynamic typing animations ✨ No need to update or change the DOM content 👀 The content is always there, you're jus' highlighting it to create the effect!

jhey ʕ•ᴥ•ʔ

146,397 subscribers

86,910 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

Here's the @CodePen for this one 🚀 Input anything and it'll randomly type it out 👇 Could easily turn it into a little component or something. Threw this one together quick with GSAP

Profilbild von Pedro Duarte

Pedro Duartevor 2 Jahren

so good man. wow the amount of times i wrote this in js in the last 15 years is insane

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

Ha 😅 This way there's more time to focus on adding random natural pauses. Put in a rudimentary solution where it randomly pauses on spaces and then changes the wpm 🤔

Profilbild von Julián Pinzón Eslava

Julián Pinzón Eslavavor 2 Jahren

Your codepen setup to showcase stuff is SO good. I love the demos but the controls are what make them pop the most. Amazing stuff!

Profilbild von Unreal3v 🌳

Unreal3v 🌳vor 2 Jahren

src?

Profilbild von Nir Galon

Nir Galonvor 2 Jahren

Nice! What is the browser support on this API?

Profilbild von Anthony Miller

Anthony Millervor 2 Jahren

Looks like this was added cause ChatGPT needed it.

Profilbild von hola

holavor 2 Jahren

finally something not related to AI

Profilbild von lear

learvor 2 Jahren

Love your codepen "template". Layer base is 🔥

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 2 Jahren

I should do a post/write up on it or my set up 🤔 Saves me a lot of time for real 💯

Ähnliche Videos

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

jhey ʕ•ᴥ•ʔ

143,806 Aufrufe • vor 1 Jahr

You can reduce the number of DOM elements and DOM operations _by a lot_ and speed things up as a result by highlighting things with the CSS Custom Highlight API (

You can reduce the number of DOM elements and DOM operations _by a lot_ and speed things up as a result by highlighting things with the CSS Custom Highlight API (

Fabio Spampinato

32,575 Aufrufe • vor 3 Jahren

If you're not sure how to create it, no worries! We'll cover every step and the math functions used to build this effect in the next update of the Unity Shaders Bible SE. This effect is also available in Godot ✨ #gamedev

If you're not sure how to create it, no worries! We'll cover every step and the math functions used to build this effect in the next update of the Unity Shaders Bible SE. This effect is also available in Godot ✨ #gamedev

Shaders Bible Series

20,402 Aufrufe • vor 3 Monaten

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨

jhey ʕ•ᴥ•ʔ

113,597 Aufrufe • vor 11 Monaten

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

Simon Vrachliotis

127,870 Aufrufe • vor 3 Jahren

The new camera in ARC Raiders is incredible. You don’t have to be a photographer or videographer or even want to create content to have fun with it. Its dynamic, first-person viewpoint takes the gaming experience to new levels. Prepare for some epic content, raiders.

The new camera in ARC Raiders is incredible. You don’t have to be a photographer or videographer or even want to create content to have fun with it. Its dynamic, first-person viewpoint takes the gaming experience to new levels. Prepare for some epic content, raiders.

That ARC Guy

10,318 Aufrufe • vor 15 Tagen

The women who create such content need to be arrested

The women who create such content need to be arrested

Norma Kay

10,456 Aufrufe • vor 1 Monat

It's a bit crazy to be able to just tell AI what to do and watch it work. Probably the most underutilized ability at the moment. You can ask it to scrape content, create credentials in a dashboard, update a doc, etc. There are basically no limits. API for the whole web with Comet.

It's a bit crazy to be able to just tell AI what to do and watch it work. Probably the most underutilized ability at the moment. You can ask it to scrape content, create credentials in a dashboard, update a doc, etc. There are basically no limits. API for the whole web with Comet.

Paul Couvert

20,235 Aufrufe • vor 10 Monaten

Welcome to The Creator Platform✨ The Fiverr of Crypto is here. Launch Challenges. Create Content. Win Rewards. Now Everyone can Create to Earn.

Welcome to The Creator Platform✨ The Fiverr of Crypto is here. Launch Challenges. Create Content. Win Rewards. Now Everyone can Create to Earn.

Creator

14,616 Aufrufe • vor 11 Monaten

I spent the last 48 hours building on top of the new ChatGPT API. You can now create a custom ChatGPT from the content of your website using You can then take that chatbot and add it to any website as a chat bubble. Pinecone OpenAI

I spent the last 48 hours building on top of the new ChatGPT API. You can now create a custom ChatGPT from the content of your website using You can then take that chatbot and add it to any website as a chat bubble. Pinecone OpenAI

Yasser

930,220 Aufrufe • vor 3 Jahren

Perfect hair 🫶🏻😍 There is no need to rush when working on a client's hair, the most important thing is using the correct technique to create beautiful waves

Perfect hair 🫶🏻😍 There is no need to rush when working on a client's hair, the most important thing is using the correct technique to create beautiful waves

Lunegrace

12,961 Aufrufe • vor 3 Monaten

“I went to create the best content”

“I went to create the best content”

Dan on Golf

38,525 Aufrufe • vor 8 Monaten

✨ I'm proud to announce the beta release of Mastering Web Animations✨ This is the only place you will need to learn how to create Immersive Web Experiences. Watch the video, message me, and Let's Create Together. Note: there are a limited number of spots, so hurry up.

✨ I'm proud to announce the beta release of Mastering Web Animations✨ This is the only place you will need to learn how to create Immersive Web Experiences. Watch the video, message me, and Let's Create Together. Note: there are a limited number of spots, so hurry up.

Victor Work

25,268 Aufrufe • vor 2 Jahren

“This team makes it really easy to create content.” Alexis Downie gives us an inside look into content with the Anaheim Ducks and which players are the most entertaining to create with.

“This team makes it really easy to create content.” Alexis Downie gives us an inside look into content with the Anaheim Ducks and which players are the most entertaining to create with.

PuckPedia

10,535 Aufrufe • vor 4 Monaten

An who grew his couples app "Flamme" from $3K to $10K MRR in 8 months using only organic growth says: "Most founders chase virality when they should be chasing volume" "People chase virality. They believe that I need to create the right kind of content. No, you need to create enough content, make more content, push out more volume."

An who grew his couples app "Flamme" from $3K to $10K MRR in 8 months using only organic growth says: "Most founders chase virality when they should be chasing volume" "People chase virality. They believe that I need to create the right kind of content. No, you need to create enough content, make more content, push out more volume."

Starter Story

10,130 Aufrufe • vor 4 Monaten

Dele Alake to the protest planners: You want to create chaos, effect a regime change

Dele Alake to the protest planners: You want to create chaos, effect a regime change

Bayo Onanuga, OON, CON

88,296 Aufrufe • vor 2 Jahren

Independent creators no longer need massive budgets or production studios to create cinematic content. 🎬✨ The future of filmmaking is intuitive, AI-powered, and accessible to everyone. Excited to see platforms pushing this vision forward with powerful models like SeaDance 2.0. Can't wait to see what you create! 🚀 🔗 𝕏 :

Independent creators no longer need massive budgets or production studios to create cinematic content. 🎬✨ The future of filmmaking is intuitive, AI-powered, and accessible to everyone. Excited to see platforms pushing this vision forward with powerful models like SeaDance 2.0. Can't wait to see what you create! 🚀 🔗 𝕏 :

Ivanka Queen 👑

10,722 Aufrufe • vor 2 Monaten

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