Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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!

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,392 subscribers

86,763 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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

Pedro Duarte profil fotoğrafı
Pedro Duarte1 yıl önce

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

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 🤔

Julián Pinzón Eslava profil fotoğrafı
Julián Pinzón Eslava1 yıl önce

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!

Unreal3v 🌳 profil fotoğrafı
Unreal3v 🌳1 yıl önce

src?

Nir Galon profil fotoğrafı
Nir Galon1 yıl önce

Nice! What is the browser support on this API?

Anthony Miller profil fotoğrafı
Anthony Miller1 yıl önce

Looks like this was added cause ChatGPT needed it.

hola profil fotoğrafı
hola1 yıl önce

finally something not related to AI

lear profil fotoğrafı
lear1 yıl önce

Love your codepen "template". Layer base is 🔥

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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

Benzer Videolar

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

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

The CSS Custom Highlight API lets you highlight search results — Without affecting the DOM structure. ::highlight(search-results) { background-color: #ff0066; color: white; } #CSS #WebAPIs
0:23

The CSS Custom Highlight API lets you highlight search results — Without affecting the DOM structure. ::highlight(search-results) { background-color: #ff0066; color: white; } #CSS #WebAPIs

Bharat Kara

44,265 görüntüleme • 2 ay önce

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 (
0:35

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

This is the extent content creator go to create content
0:36

This is the extent content creator go to create content

African Hub

143,266 görüntüleme • 1 yıl önce

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

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 görüntüleme • 7 ay önce

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

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 görüntüleme • 5 ay önce

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

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

929,797 görüntüleme • 3 yıl önce

“I went to create the best content”
0:55

“I went to create the best content”

Dan on Golf

38,525 görüntüleme • 4 ay önce

✨ 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.
1:45

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

Hey #RobloxDev 👋! Want to create a reflective part that you can use for a puddle like effect or a mirror in your #Roblox experience? You can achieve this effect by using a glass part and the highlight object. 👀
0:54

Hey #RobloxDev 👋! Want to create a reflective part that you can use for a puddle like effect or a mirror in your #Roblox experience? You can achieve this effect by using a glass part and the highlight object. 👀

Gamefam Studios

35,844 görüntüleme • 8 ay önce

Some examples: - Text to Speech: Read aloud content or create audiobooks. - Speech to Text: Transcribe audio and video into text. - Voice Designer: Create custom AI voices. - Conversational AI: Build dynamic voice agents and make outbound calls.
3:29

Some examples: - Text to Speech: Read aloud content or create audiobooks. - Speech to Text: Transcribe audio and video into text. - Voice Designer: Create custom AI voices. - Conversational AI: Build dynamic voice agents and make outbound calls.

ElevenLabs

19,318 görüntüleme • 1 yıl önce

🚘✨ If you're gonna build an app, why not do it with some style? Join our Gemini API Developer Competition! Create an app with the Gemini API & showcase the power of gen AI for a chance to win a custom electric 1981 DeLorean and more. Details here 👀 →
1:12

🚘✨ If you're gonna build an app, why not do it with some style? Join our Gemini API Developer Competition! Create an app with the Gemini API & showcase the power of gen AI for a chance to win a custom electric 1981 DeLorean and more. Details here 👀 →

Google for Developers

239,906 görüntüleme • 2 yıl önce

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

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

Bayo Onanuga, OON, CON

88,296 görüntüleme • 1 yıl ö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 👇
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,112 görüntüleme • 2 yıl önce

✨Mastering Web Animations✨ THE ONLY COURSE YOU WILL NEED TO MASTER WEB ANIMATIONS. I know you were waiting for it, but now you have it. Whether you're a beginner or an experienced developer, the course will guide you through principles of motion, timeline animation, tools, and techniques used by award-winning developers. Enjoy the Early Bird Price, and let's Create together. See you there.
2:15

✨Mastering Web Animations✨ THE ONLY COURSE YOU WILL NEED TO MASTER WEB ANIMATIONS. I know you were waiting for it, but now you have it. Whether you're a beginner or an experienced developer, the course will guide you through principles of motion, timeline animation, tools, and techniques used by award-winning developers. Enjoy the Early Bird Price, and let's Create together. See you there.

Victor Work

32,404 görüntüleme • 1 yıl önce

See how Brooke Jamieson uses the #AmazonQ Developer CLI agent to create a custom workshop guide. Watch to see the agent analyze workshop code content, create a workbook with progress tracking, & add encouraging notes...all in the terminal! ➡️
1:13

See how Brooke Jamieson uses the #AmazonQ Developer CLI agent to create a custom workshop guide. Watch to see the agent analyze workshop code content, create a workbook with progress tracking, & add encouraging notes...all in the terminal! ➡️

Amazon Web Services

10,426 görüntüleme • 1 yıl önce

xQc is down to move to Miami to create content with Adin Ross. 👀
0:36

xQc is down to move to Miami to create content with Adin Ross. 👀

DramaAlert

55,936 görüntüleme • 2 yıl önce

Enhe... Raila Odinga - "You need the Housing Levy to create wealth and change fortunes of the common man down there.." #SystemYaFacts
0:44

Enhe... Raila Odinga - "You need the Housing Levy to create wealth and change fortunes of the common man down there.." #SystemYaFacts

-Dennis Itumbi, CBS

146,868 görüntüleme • 3 yıl önce

Here is how I made the ✨shiny✨ hover effect using Tailwind CSS.
2:40

Here is how I made the ✨shiny✨ hover effect using Tailwind CSS.

Alfon

71,117 görüntüleme • 1 yıl önce