微件:ScrollText

<style> .scroll-text {

 position: relative;
 overflow: hidden;
 display: flex;
 align-items: flex-start;

}

.scroll-text .scroll-text-content {

 word-wrap: break-word;
 word-break: break-all;
 position: relative;
 width: 100%;
 text-align: center;
 animation: scrollText linear infinite;

}

.scroll-text .scroll-text-content:hover {

 animation-play-state: paused;

} </style>

<script> (function() {

 function initScroll() {
   var wrappers = document.querySelectorAll('.scroll-text');
   
   if (!wrappers.length) {
     setTimeout(initScroll, 100);
     return;
   }
   
   wrappers.forEach(function(wrapper, index) {
     var content = wrapper.querySelector('.scroll-text-content');
     if (!content) {
       return;
     }
     
     var speed = parseFloat(content.getAttribute('data-speed')) || 10;
     var animationName = 'scrollText-' + index + '-' + Date.now();
     
     setTimeout(function() {
       var contentHeight = content.scrollHeight;
       var wrapperHeight = wrapper.offsetHeight;
       var scrollDistance = contentHeight - wrapperHeight;
       
       var styleId = 'scroll-text-animation-' + index;
       var existingStyle = document.getElementById(styleId);
       if (existingStyle) {
         existingStyle.remove();
       }
       
       var style = document.createElement('style');
       style.id = styleId;
       style.textContent = `
         @keyframes ${animationName} {
           0% { 
             transform: translateY(0); 
           }
           100% { 
             transform: translateY(-${scrollDistance}px); 
           }
         }
       `;
       document.head.appendChild(style);
       
       var text = content.textContent || content.innerText;
       var charCount = text.replace(/\s+/g, ).length;
       var duration = Math.max(speed, charCount / 8);
       content.style.animationName = animationName;
       content.style.animationDuration = duration + 's';
     }, 10);
   });
 }
 
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initScroll);
 } else {
   initScroll();
 }

})(); </script>