javascript - 如何根据段落中文字的长度来设置段落的动画时间？

Question

我目前使用纯 CSS3 动画从右向左滚动文本的选取框样式。

HTML:

<p class="marquee">
    <span>
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. 
        </a>
    </span>
</p>

CSS:

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
}

.marquee span {
    display: inline-block;
    animation: marquee 45s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  } 100% {
    transform: translate(-100%, 0);    
  }
}

现在，段落滚动得很好，我对速度很满意，但我想扩展它的可用性，以便能够处理不同长度的文本，并让动画速度取决于文本的长度。

理想情况下，我想要做的是让动画速度足够慢以便阅读文本，当显示所有文本时，动画将再次恢复。

单靠 CSS 可能无法实现(或者可以吗？)所以我正在寻找一种方法来通过 JS 甚至 jQuery 实现它。我只是不知道如何以实用的方式做到这一点，JSwise。

提前感谢您的建议。

Answer 1

所以这是您的实际动画结果:

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  //position: absolute;
}

.marquee span {
  display: inline-block;
  animation: marquee 45s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  } 100% {
    transform: translate(-100%, 0);    
  }
}

<p class="marquee">
  <span>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. 
    </a>
  </span>
</p>

那是视觉上注意到动画速度。

现在 «扩展其可用性，使其能够处理不同长度的文本，并使动画速度取决于文本的长度。»...

您会注意到我使用了 width 而不是 .length。那是因为 .length 返回了有多少个字符...而且所有字符不占用相同的空间。

现在这只是数学三规则，您可以在其中为“测试”宽度和延迟(您想要的速度)定义一些默认值:

// Establish the speed you want.
// This is based on what you had on your "test" string prior to any modification using a script.
var defaultDelay = 45; // Is the CSS defined delay.
var defaultWidth = 602; // Is the width for your tested 100 char string.

$(".marquee a").each(function(){

  var width = $(this).width();
  console.log("width: "+width);
  
  var newDelay = defaultDelay*(width/defaultWidth);
  console.log("newDelay: "+newDelay);

  $(this).closest("span").css("animation", "marquee " + newDelay + "s linear infinite");
});

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*position: absolute;*/    /* Removed */
}

.marquee span {
  display: inline-block;
  animation: marquee 45s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  } 100% {
    transform: translate(-100%, 0);    
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="marquee">
  <span>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. 
    </a>
  </span>
</p>

<p class="marquee">
  <span>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus id urna mattis tempor. 
    </a>
  </span>
</p>

<p class="marquee">
  <span>
    <a href="#">Lorem ipsum dolor sit amet. 
    </a>
  </span>
</p>

上面的三个 .marquee 以相同的“速度”动画。