Jan 8, 2023

CSS Rollover Animation

#programming #frontend #css #custom-elements #web-components

I've been browsing the web much more lately, because, turns out, when you have a baby you actually use the internet for things, rather than just making it or learning how to make it. I found this cool animation on the Kudos website:

As you roll over the letters, the color changes and then fades back to white.

I thought this might be a cool, tiny way to dip my toes into Custom Elements, so I did. Here it is:

The markup for the text below is:

<script async src="/javascript/rollover.js"></script>
<my-rollover>Some Text</my-rollover>

Rendered (try rolling over)

Some Text

If you like this post, please share it on Twitter and/or subscribe to my RSS feed. Or don't, that's also ok.