Word Rotator with @counter-style

In the last article, we covered a few ways for generating character strings to be used for data obfuscation. We looked at the counter style systems: symbolic, alphabetic, and numeric. Now, let’s get into even more uses of @counter-style and discover additional systems.

Word Rotator

A word rotator is an interface designed to cycle through a predefined list of words or phrases within a static sentence. It serves as a tool to create visually appealing elements such as dynamic taglines and creative banners.

This example is made with @counter-style:

A Set of Words

First, let’s compile a set of words that we’ll be rotating. These words will be stored in the symbols descriptor of @counter-style.

@counter-style words {
  symbols: startups enterprises nonprofits educators visionaries;
}Code language: CSS (css)

Similar to an array, we can maintain a group of words through the @counter-style declaration and later access each word based on its index/count. The system option for this is cyclic, which allows us to loop through predefined lists of symbols. It sequentially processes the provided symbols and automatically resets to the beginning of the list once the final item is reached.

Similar to an array, we can maintain a group of words through the @counter-style declaration and later access each word based on its index/count. The system opti...