CSS Trick: Jumping Text Chain: An Interactive CSS Effect

I’m not sure what to call this effect, but let’s refer to it as the “Jumping Text Chain.” The effect is such that when you hover the mouse over any letter in a string of text, that letter jumps up, just like in this animation:

https://weijunext.com

Though this effect might not have significant business value, it emphasizes interactivity and visual appeal. Who wouldn’t be tempted to interact with such an engaging dynamic effect?

Implementing the Code

Implementing the “Jumping Text Chain” effect is straightforward. It doesn’t matter whether you use HTML, Vue, or React; you just need to write some CSS.

Here’s how I did it using TailwindCSS, in just about 12 lines (let’s say 10 for simplicity):

export default function Caterpillar({ text, className, bgColor }) {
  const chars = text.split('');
  return (
    <div className={`flex ${className}`}>
      {chars.map((c, i) => (
        <div key={i} className={`flex ${bgColor || 'bg-[#4472c4]'} ${i === 0 ? 'rounded-s-lg' : ''} ${i === chars.length - 1 ? 'rounded-e-lg' : ''} border-top border-bottom border-2 border-brand bg-primary text-background -ml-[2px] pb-[0.1rem] px-2 transition duration-300 ease-in-out hover:-translate-y-1`}>
          <span>{c}</span>
        </div>
      ))}
    </div>
  );
}

To use the component:

<Caterpillar text={BLOG.BIO} className="justify-center text-white -ml-px p-1" bgColor="bg-[#4472c4]" />

If you’re using React + TailwindCSS, you can directly copy my code. For Vue, just modify the tag iteration, and you’ll have your own “Jumping Text Chain” component.

Introduction to TailwindCSS

If you’re new to TailwindCSS, this section can serve as a beginner’s guide.

TailwindCSS is a CSS framework that essentially turns every CSS property into a utility class. You can combine these classes to create complex designs and layouts. This approach is often referred to as “atomic” design.

TailwindCSS has several advantages over traditional CSS:

• Efficiency: Quick UI construction without extensive custom CSS.
• Responsive Design: Built-in responsive design utilities for efficient layout creation.
• High Customizability: Easy style expansion through the Tailwind configuration file.

Using TailwindCSS

The steps to use TailwindCSS in Vue, React, or Next.js are similar. Here’s how:

1.Installation

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

This installs TailwindCSS and its dependencies, creating a tailwind.config.js file.

2.Importing Tailwind Layers

Include the following in your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

3.Configuration

Customize your design in tailwind.config.js. Learn more about configuration here: Tailwind Configuration.

conclusion

In wrapping up, the “Jumping Text Chain” demonstrates that even the simplest CSS techniques can significantly enhance user interaction and visual appeal. It’s a reminder that in web development, creativity and playful experimentation can lead to engaging and memorable user experiences. Keep exploring and innovating — every small detail counts!

To learn more about me and discover additional insights on web development, cloud computing, and serverless architectures, visit https://weijunext.com. You can also explore my Medium articles by visiting https://medium.com/@weijunext for more in-depth content or connect with me on Twitter @ https://twitter.com/weijunext