Text Scroll Effect Overview

The Text Scroll Effect creates an engaging character-by-character reveal animation triggered by page scrolling. As users scroll down, text gradually transitions from a faded state to full visibility with customizable color changes, creating a dynamic reading experience that draws attention to important content.

HTML Structure

The generated HTML structure consists of:

• A unique container ID like text-scroll-abc123 wrapping the entire component
• Embedded styles scoped to the container ID for isolation
• A semantic HTML element ( h1 , h2 , p , etc.) with class .scroll-text
• The data-scroll-text attribute marks the element for JavaScript processing
• An inline script tag containing the self-contained animation logic

JavaScript Implementation

The animation is powered by pure JavaScript without external dependencies:

• Text is split into individual characters wrapped in .scroll-char spans
• Spaces are converted to   to maintain proper spacing
• Initial state sets opacity to the fade value (e.g., 0.3 ) and start color
• Scroll event listeners track viewport position using getBoundingClientRect()
• The animateOnScroll function calculates progress and updates each character
• Supports both DOMContentLoaded and immediate execution

Scroll Progress Calculation

The effect uses viewport-based progress calculation:

• Start point defaults to windowHeight * 0.9 (90% down the viewport)
• End point defaults to windowHeight * 0.4 (40% down the viewport)
• Progress formula: (startPoint - elementTop) / (startPoint - endPoint)
• Progress is clamped between 0 and 1 using Math.max(0, Math.min(1, progress))
• Character-specific progress includes stagger delay calculation

Character Animation

Individual character animations create the staggered reveal effect:

• Each character has a delay based on its index: (index / totalChars) * staggerVal
• Character progress: (progress - charDelay) / (1 - staggerVal)
• Opacity transitions from fade value to 1.0 based on progress
• Color interpolation supports two modes:
  • gradient : Smooth RGB color interpolation
  • instant : Binary switch at 50% progress
• RGB values are calculated and converted to hex format

Interactive Features

The generator includes several user experience enhancements:

• Live preview with scrollable container showing the effect in action
• Real-time updates as customization options are changed
• Color picker with hex input synchronization
• Conditional form fields that show/hide based on selections
• Copy button with visual feedback ( .copied class)
• Smooth step navigation with progress indicators

Styling Details

The visual design incorporates flexible styling options:

• Text alignment options: left , center , or right
• Font family can inherit from HTML element or use custom selection
• Font size supports inherit mode or custom pixel values ( 12px to 120px )
• Font weight ranges from 300 (Light) to 900 (Black)
• Line height adjustable from 1.0 to 2.0
• CSS transitions on characters: transition: opacity 0.3s ease, color 0.3s ease

Responsive Design

The effect adapts seamlessly to different screen sizes:

• Viewport-based calculations work on any screen dimension
• Generator interface uses CSS Grid with responsive breakpoints:
  • Desktop: 2-column grid for customization options
  • Tablet ( max-width: 768px ): Single column layout
  • Mobile ( max-width: 480px ): Reduced padding
• Navigation buttons stack vertically on mobile devices
• Preview container maintains usability across all devices
• Generated widget code is fully responsive by default

Customization Options

The generator provides extensive customization capabilities:

• Text content: Any length of text with proper character handling
• 17 font family options including system fonts and web-safe choices
• 7 HTML element options from h1 to p
• Color customization with visual picker and hex input
• Initial opacity from 0 (invisible) to 1 (fully visible)
• 5 scroll start positions from "As soon as visible" to "When centered"
• 5 scroll end positions controlling animation duration
• Reveal speed (stagger) from 0 (simultaneous) to 2 (highly staggered)

Implementation Benefits

This solution offers several advantages over library-based alternatives:

• Zero external dependencies - no GSAP, jQuery, or other libraries required
• Lightweight implementation with minimal performance impact
• Self-contained code that won't conflict with existing scripts
• Automatic initialization without manual JavaScript calls
• Works with dynamically loaded content
• SEO-friendly as original text remains in the HTML
• Accessibility maintained with proper semantic elements
• No build process or compilation required