查看“︁ScrollText”︁的源代码

<style>
.scroll-text {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-text .scroll-text-content {
  word-wrap: break-word;
  word-break: break-all;
  position: relative;
  width: 100%;
  text-align: center; 
}

.scroll-text.has-scroll {
  align-items: flex-start;
}

.scroll-text.has-scroll .scroll-text-content {
  text-align: center;
}

.scroll-text .scroll-text-content.enable-scroll {
  animation: scrollText linear infinite;
}

.scroll-text .scroll-text-content.enable-scroll:hover {
  animation-play-state: paused;
}

@keyframes scrollText-default {
  0% { 
    transform: translateY(0); 
  }
  100% { 
    transform: translateY(calc(-100% + 110px));
  }
}
</style>

<script>
(function() {
  function initScroll() {
    // 使用 class 选择器获取所有滚动文本容器
    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 || content.classList.contains('scroll-initialized')) {
        return;
      }
      
      // 标记已初始化，避免重复处理
      content.classList.add('scroll-initialized');
      
      var text = content.textContent || content.innerText;
      var charCount = text.replace(/\s+/g, '').length;
      var threshold = parseInt(content.getAttribute('data-threshold')) || 50;
      var speed = parseFloat(content.getAttribute('data-speed')) || 10;
      
      if (charCount > threshold) {
        // 为父容器添加标识类，表示需要滚动
        wrapper.classList.add('has-scroll');
        
        // 为每个实例创建唯一的动画名称
        var animationName = 'scrollText-' + index + '-' + Date.now();
        content.classList.add('enable-scroll');
        
        // 等待DOM更新后计算实际高度
        setTimeout(function() {
          var contentHeight = content.scrollHeight;
          var wrapperHeight = wrapper.offsetHeight;
          var scrollDistance = contentHeight - wrapperHeight;
          
          // 动态设置滚动距离
          if (scrollDistance > 0) {
            // 为当前实例创建独立的动画样式
            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 duration = Math.max(speed, charCount / 8);
            content.style.animationName = animationName;
            content.style.animationDuration = duration + 's';
          } else {
            // 如果实际上不需要滚动，移除滚动类
            wrapper.classList.remove('has-scroll');
            content.classList.remove('enable-scroll');
          }
        }, 10);
      } else {
        // 字符数未达到阈值，确保没有滚动类
        wrapper.classList.remove('has-scroll');
      }
    });
  }
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initScroll);
  } else {
    initScroll();
  }
})();
</script>