像 https://sendgrid.com/ 这样的 jQuery 文本旋转器

Question

我过去曾使用和编码过一些简单的文本旋转器，但我正在尝试实现https://sendgrid.com/ 在其主页上使用的类似效果。

具体来说，一个句子，中间有一组单词，淡入淡出，根据需要扩展句子.. 并在其下方有一个加载线。

另外，作为无 js 的后备，我想使用 HTML 标记来控制旋转的文本，所以它不在 JS 数组或其他东西中..

类似：

<h1>This is the 
    <span class="show">short</span>
    <span>longer</span>
    <span>Longest ever</span> 
    <span>craziest, super long</span>
sentence in the World!</h1>

这里，在没有js的情况下，只会显示带有.show的span。 并且，jQuery 将在这些跨度中旋转，切换类 .show，扩大单词淡入的区域......

我找到了一个 gsap 版本，但过去没有使用过，这个项目使用 jQuery 但是，这是效果，例如： https://codepen.io/GreenSock/pen/BaNyyVP

有什么想法或建议！？

Answer 1

这是我们想出的，效果很好！ 在完整窗口中打开代码 sn-p 以正确查看（示例的 css 中未包含任何媒体查询）

jQuery(document).ready(function ($) {
  $(".scroller").each(function (i, scroller) {
    $(scroller).find(".strings-cont").addClass("no-width");

    const strings = $(scroller).find(".string");
    let active = 0;

    next = () => {
      strings.each((i, obj) => {
        i === active ? $(obj).addClass("active") : $(obj).removeClass("active");
      });
      const val = strings[active].offsetWidth + "px";
      $(scroller).find(".strings-cont").css("width", val);
      active = (active + 1) % strings.length;
    };
    setInterval(next, 3000);
    setTimeout(next, 0);
  });
});

h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  text-align: center;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
.strings-cont {
  position: relative;
  display: inline-flex;
  transition: width 0.3s ease;
  justify-content: center;
}
.string {
  font-weight: bold;
  transition: opacity 0.3s ease, top 0.3s ease;
  position: absolute;
  opacity: 0;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.string:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 4px;
  width: 0;
  background-color: #3368fa;
  border-radius: 2px;
}
.string.active {
  transition: opacity 0.3s ease;
  opacity: 1;
  position: static;
  transform: translateX(0);
  left: 0;
  top: 0;
}
.string.active:before {
  width: 100%;
  transition: all 2.7s ease;
  transition-delay: 0.3s;
}

.no-width {
  width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="scroller">
  This animation is&nbsp;
  <span class="strings-cont">
    <span class="string active">awesome</span>
    <span class="string">great</span>
    <span class="string">fantastic</span>
    <span class="string">boring</span>
  </span>
  &nbsp;don't you think?
</h1>
<h1 class="scroller">
  This is working&nbsp;
  <span class="strings-cont">
    <span class="string active">okay</span>
    <span class="string">better</span>
    <span class="string">nice</span>
    <span class="string">smoothly</span>
  </span>
  &nbsp;don't you think?
</h1>
<h1 class="scroller">
  -----------&nbsp;
  <span class="strings-cont">
    <span class="string active">you</span>
    <span class="string">get</span>
    <span class="string">the</span>
    <span class="string">point</span>
  </span>
  &nbsp;-----------
</h1>