Long Name Animations

A collection of 8 elegant CSS animations specifically designed to handle long text strings in confined spaces. Perfect for displaying long usernames, titles, or any text that might overflow its container.

Demo

Simply open index.html in your browser to see all animations in action with interactive code examples.

Features

• 🎨 8 Different Animation Styles - variety of approaches to handle text overflow
• 🌙 Dark Theme - modern GitHub-inspired dark UI
• 📋 Copy-to-Clipboard - easily copy code snippets
• 🎯 Interactive Examples - see each animation in real-time
• 📱 Responsive Design - works on all screen sizes
• 🔧 Customizable - easily adjust colors, speeds, and dimensions

Animation Styles

1. Back-and-Forth Scroll - text scrolls left and right automatically with fade gradients at edges
2. Hover Scroll - text only scrolls when mouse hovers over container
3. Continuous Marquee - infinite loop scrolling effect
4. Click to Expand - click to reveal full name with smooth expansion
5. Progressive Reveal - text appears gradually from left to right
6. Bounce Scroll - scrolling animation with playful bounce effect
7. Static Gradients - fixed edge gradients indicating overflow
8. Typewriter Effect - text types out character by character

Quick Start

1. Clone or download this repository
2. Open index.html in any modern web browser
3. Explore the different animations and their code

Usage

Each animation is self-contained and can be copied directly from the demo page. The basic structure follows:

<div class="name-container [animation-class]">
    <div class="name-wrapper">
        <span class="name">Your Long Text Here</span>
    </div>
</div>

Replace [animation-class] with one of the following:

• scroll-back-and-forth
• hover-scroll
• continuous-marquee
• click-to-expand
• progressive-reveal
• bounce-scroll
• static-gradients
• typewriter-effect

Customization

All animations can be easily customized in styles.css:

Colors

• Background: #0d1117 (dark gray)
• Container: #161b22 (darker gray)
• Text: #c9d1d9 (light gray)
• Borders: #30363d (medium gray)
• Accents: #58a6ff (blue)

Animation Speed

Adjust durations in @keyframes rules:

animation: scrollText 3s ease-in-out infinite; /* change 3s to your preference */

Container Dimensions

Modify in .name-container:

max-width: 300px; /* adjust width */
padding: 12px 16px; /* adjust spacing */

Browser Compatibility

Works on all modern browsers that support CSS animations:

• Chrome 43+
• Firefox 16+
• Safari 9+
• Edge 12+

File Structure

long-name-animations/
├── index.html      # main demo page
├── styles.css      # all animation styles
├── highlight.js    # syntax highlighting
├── README.md       # this file
└── LICENSE         # license info

License

See LICENSE file for details.

Contributing

Feel free to open issues or submit pull requests with improvements or new animation ideas!