A web component for animating "power words" in HTML header elements (vue component version coming soon!)
<head>
<script src="rolodex.js" type="module"></script>
</head>
<body>
<!-- I'd probably never actually break a text component down like this, but for line length sake... -->
<h1>
GitHub... the most
<rolodex-animation options='["amazing", "wonderful", "incredible"]'</rolodex-animation>
GIT repository in the world!
</h1>
</body>Screen.Recording.2024-11-25.at.9.20.01.PM.mov
| option | required | default | description |
|---|---|---|---|
| interval | No | 3000 | Interval milliseconds for time between animations |
| options | Yes | [] | An array of text options to animate through |
| transition-duration | No | 1 | Number of seconds of the animation in and out |
| transition-timing-function | No | "ease-in" | Animation curve of elements coming in and out |
- Importable into any web project using JavaScript on the client (all of them?), regardless of CSS, SCSS/SASS, Less, etc.
- Ability to connect with multiple user targets with the same copy (i.e. instead of rendering different text for different targets, such as mac or Linux uses for a CLI, you could just say:
<body>
<h1>Attention <rolodex-animation='["Mac", "Linux"]'></rolodex-animation> users!</h1>
</body>Uploading Screen Recording 2024-11-25 at 9.25.22 PM.mov…
The original contacts app...
I chose a very complex, but highly optimal, type-safe, scalable, and reliable tech stack...
- HTML
- CSS
- Vanilla JavaScript