Nice effect. The drawback of this approach is that it only works if the subtitles are enabled. It won't work if you do not want the subtitles enabled by default or if the user disables them. An alternative would be to analyse the track during initial load and extract the timestamps where the keyword is used and then to use the 'timeupdate' event of to trigger the animation.
@CSSWeeklyАй бұрын
Thanks so much for your insight, Thomas! 🙏 I wanted to showcase the easiest solution here to inspire others, but it does have the drawback you mentioned. The alternative would probably be something one should implement in production-it's cool that you mentioned the 'timeupdate' event here. 👏
@ahmad-murery2 ай бұрын
Nice Zoran! I didn't think it was that easy to create something like this, I actually wasn't aware of the cuechange event Thanks
@CSSWeekly2 ай бұрын
Thank you, Ahmad! I’m glad you found it interesting. 🙂
@ScriptRaccoon2 ай бұрын
That's a great video. I had no idea how KZfaq does it and believed it must be some rocket science. But it's not. We just take advantage of the cue change event of the track element. Nice! Is this also possible when the subtitles are not visible (but still present)? This would even be more magical to the user.
@Killyspudful2 ай бұрын
Yes! :)
@CSSWeekly2 ай бұрын
Thanks, my friend! 🙏 Yes, I think you can achieve this if you don't use native subtitles functionality but implement your own-you could hide them from the user but have them available behind the scenes. That's something you probably need to do if you want to style them specifically, as CSS :cue pseudo-element is quite limited.
@gangasai_kumar_G2 ай бұрын
great work sir, can you also create when i clicked subscribe button on a youtube its create one animation like confetti effect, if it is posible to recreate that in css. can you make a video on it.💌🤟
@CSSWeekly2 ай бұрын
Thank you, I appreciate it! 🙏 That’s an excellent idea! I’ll look into it, as it definitely seems to be something people might like. 🙂