Skip to content

Latest commit

 

History

History
58 lines (42 loc) · 1.8 KB

README.md

File metadata and controls

58 lines (42 loc) · 1.8 KB
Raw

Rolodex

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

Options (attributes)

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

Intentions

  1. Importable into any web project using JavaScript on the client (all of them?), regardless of CSS, SCSS/SASS, Less, etc.
  2. 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…

Rolodex? What's a rolodex?

The original contacts app...



rolodex

Tech

I chose a very complex, but highly optimal, type-safe, scalable, and reliable tech stack...

  • HTML
  • CSS
  • Vanilla JavaScript