CSS Scrolling Text Effect with Smooth Fade Animation

Media Management, Websites, WordPress customization

Create Eye-Catching Hero Sections with Pure CSS Animations

CSS animations ✦ tips and tricks ✦ websites ✦ elements ✦ design ✦

Introduction

In modern web design, creating engaging hero sections is crucial for capturing user attention. One of the most effective ways to achieve this is through animated text overlays on background images. Today, I’ll show you how to create a smooth scrolling text effect with fade animations using pure CSS – no JavaScript libraries required.

What You’ll Learn

This tutorial covers:

Creating a responsive image container with overlay
Implementing smooth scrolling text animation
Adding fade-in and fade-out effects
Responsive design considerations
Hover interactions and visual enhancements

The Complete Code

Here’s the complete HTML and CSS code for the scrolling text effect:

HTML Structure

				
					<div class="hero-container">
    <div class="hero-background"></div>
    <div class="hero-overlay"></div>
    <div class="scrolling-wrapper">
        <div class="scrolling-text">
            <span>SAMPLE TEXT</span>
            <span class="star">✦</span>
            <span>UB SAMPLE TEXT</span>
            <span class="star">✦</span>
            <span>SAMPLE TEXT</span>
            <span class="star">✦</span>
            <span>UB SAMPLE TEXT</span>
            <span class="star">✦</span>
        </div>
    </div>
</div>

CSS Styling

				
					.hero-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 2px;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://website.comt/wp-content/uploads/2025/07/img.webp') center/cover no-repeat;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.scrolling-wrapper {
    position: absolute;
    top: 80%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 3;
    white-space: nowrap;
    overflow: hidden;
}

.scrolling-text {
    display: inline-block;
    font-size: 8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: rgba(255, 255, 255, 0.3);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.01);
    animation: scroll-with-fade 60s linear infinite;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    opacity: 0;
}

.scrolling-text:hover {
    animation-play-state: paused;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

@keyframes scroll-with-fade {
    0% {
        transform: translateX(0%);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.scrolling-text span {
    margin: 0 1.5rem;
    display: inline-block;
}

.star {
    display: inline-block;
    margin: 0 1rem;
    font-size: 4rem;
    color: #ffdd00;
    animation: rotate 20s linear infinite;
    transform-origin: center center;
    vertical-align: middle;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.scrolling-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 4s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-container {
        height: 400px;
    }
    
    .scrolling-text {
        font-size: 5rem;
    }
    
    .star {
        font-size: 3.5rem;
    }
}

@media (max-width: 480px) {
    .hero-container {
        height: 300px;
    }
    
    .scrolling-text {
        font-size: 3.5rem;
    }
    
    .star {
        font-size: 3.0rem;
    }
}

JavaScript for Enhanced Interactivity

				
					document.addEventListener('DOMContentLoaded', function() {
    const scrollingText = document.querySelector('.scrolling-text');
    
    if (scrollingText) {
        scrollingText.addEventListener('mouseenter', function() {
            this.style.animationPlayState = 'paused';
        });
        
        scrollingText.addEventListener('mouseleave', function() {
            this.style.animationPlayState = 'running';
        });
    }
});

Key Features Explained

1. Smooth Fade Animation

The scroll-with-fade keyframe creates a seamless transition:

0-5%: Gradual fade-in as text enters
5-95%: Full opacity during scroll
95-100%: Gradual fade-out as text exits

2. Layered Structure

Background layer: Image with cover sizing
Overlay layer: Semi-transparent dark overlay for text readability
Text layer: Scrolling text with highest z-index

3. Interactive Elements

Hover pause: Animation pauses on mouse hover
Glow effect: Text brightens and glows when hovered
Rotating stars: Decorative elements with continuous rotation

4. Responsive Design

The effect adapts to different screen sizes:

Desktop: 8rem font size, 500px container height
Tablet: 5rem font size, 400px container height
Mobile: 3.5rem font size, 300px container height

Customization Options

Change Animation Speed

Modify the animation duration in the CSS:

				
					animation: scroll-with-fade 30s linear infinite; /* Faster */
animation: scroll-with-fade 120s linear infinite; /* Slower */

Adjust Fade Timing

Control fade-in/out duration by changing keyframe percentages:

				
					@keyframes scroll-with-fade {
    0% { opacity: 0; }
    10% { opacity: 1; } /* Longer fade-in */
    90% { opacity: 1; } /* Shorter fade-out */
    100% { opacity: 0; }
}

Custom Text Colors

				
					.scrolling-text {
    color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    /* or */
    color: rgba(255, 215, 0, 0.7); /* Gold with transparency */
}

Browser Support

This effect works in all modern browsers:

Chrome 26+
Firefox 16+
Safari 9+
Edge 12+
iOS Safari 9+
Android Browser 4.4+

Performance Tips

Use CSS transforms instead of changing position properties
Optimize images for web (WebP format when possible)
Consider will-change property for better performance:

				
					.scrolling-text {
    will-change: transform, opacity;
}

Conclusion

This scrolling text effect with fade animation creates a professional, eye-catching hero section that’s perfect for modern websites. The combination of smooth animations, responsive design, and interactive elements makes it an excellent choice for showcasing your brand or key messages.

The pure CSS approach ensures fast loading times and broad browser compatibility, while the customization options allow you to adapt the effect to match your brand identity perfectly.

CSS animations ✦ tips and tricks ✦ websites ✦ elements ✦ design ✦

Live Demo

You can see this effect in action and experiment with the code using the interactive demo above. Try hovering over the text to see the pause effect and notice how smoothly the text fades in and out as it scrolls.