javascript - 如何让文本动画看起来好像在另一层下面

Question

对于一个可比较的例子，view this site .如果您看向左侧，您会看到旋转的文本在不同的文本行中循环。这就是我想要完成的。此示例中的文本从白线开始，然后一旦它开始向上移动，它看起来就好像在一层下面，看起来好像不合适。

我如何修改我的代码来处理这个问题？

现在白线和文本没有出现在一条直线上，我不知道如何让它看起来像文本在另一层下移动。

var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;

var loop = function() {
  arr.removeClass('curr');
  arr.removeClass('next');
  $('span[data-index = ' + i + ']').addClass('curr');
  $('span[data-index = ' + next_i + ']').addClass('next');

  i = (i + 1) % arrLen;
  next_i = (next_i + 1) % arrLen;

};
loop();
setInterval(loop, 3000);

#container {
  background: blue;
  width: 100%;
  height: 100vh;
}

.digitalAgency {
  height: 20px;
  position: fixed;
  top: 50%;
  left: -45%;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.digitalAgency .textContainer::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  background: #fff;
  display: inline-block;
  top: 50%;
  margin-right: 20px;
  left: 33%;
}

.digitalAgency .textContainer {
  position: relative;
  width: 650px;
  height: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-90deg);
  -ms-transform: translateX(-50%) rotate(-90deg);
  transform: translateX(-50%) rotate(-90deg);
  display: inline-block;
overflow: hidden;
}

.digitalAgency,
.agencyText {
  -webkit-animation-duration: .45s;
  animation-duration: .45s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.agencyText {
  font-family: 'Raleway', sans-serif;
  font-size: 1.1rem;
  color: #FFF;
}

.digitalAgency .textContainer .agencyText {
  padding-left: 60px;
  position: absolute;
  visibility: hidden;
  width: 100%;
  height: 100%;
  left: 33%;
}

.digitalAgency .textContainer .agencyText.curr {
  visibility: visible;
}

.digitalAgency .agencyText.curr {
  visibility: visible;
  -webkit-animation-name: dgAgnCurr;
  animation-name: dgAgnCurr
}

.digitalAgency .agencyText.next {
  visibility: hidden;
  -webkit-animation-name: dgAgnNext;
  animation-name: dgAgnNext
}

@-webkit-keyframes dgAgnCurr {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

@keyframes dgAgnCurr {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

@-webkit-keyframes dgAgnNext {
  from {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes dgAgnNext {
  from {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="digitalAgency">
    <span class="textContainer">
    <span data-index="0" class="agencyText">Text for A</span>
    <span data-index="1" class="agencyText">Text for B</span>
    <span data-index="2" class="agencyText">Text for C</span>
    <span data-index="3" class="agencyText">Text for D</span>
    </span>
  </div>
</div>

Answer 1

摆脱 CSS 动画并使用简单的过渡。无需使事情过于复杂。您只需将 -100% 转换为 0% 再到 100%，因此您实际上并不需要动画关键帧。

var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;

var loop = function() {
  arr.removeClass('curr');
  arr.removeClass('next');
  $('span[data-index = ' + i + ']').addClass('curr');
  $('span[data-index = ' + next_i + ']').addClass('next');

  i = (i + 1) % arrLen;
  next_i = (next_i + 1) % arrLen;

};
loop();
setInterval(loop, 3000);

#container {
  background: blue;
  width: 100%;
  height: 100vh;
}

.digitalAgency {
  height: 20px;
  position: fixed;
  top: 50%;
  left: -45%;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.digitalAgency .textContainer::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  background: #fff;
  display: inline-block;
  top: 50%;
  margin-right: 20px;
  left: 33%;
 
}

.digitalAgency .textContainer {
  position: relative;
  width: 650px;
  height: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-90deg);
  -ms-transform: translateX(-50%) rotate(-90deg);
  transform: translateX(-50%) rotate(-90deg);
  display: inline-block;
  overflow: hidden;
}

.digitalAgency,
.agencyText {
   transition:.45s ease-in-out; /* added this */
}

.agencyText {
  font-family: 'Raleway', sans-serif;
  font-size: 1.1rem;
  color: #FFF;
}

.digitalAgency .textContainer .agencyText {
  padding-left: 60px;
  position: absolute;
  visibility: hidden;
  width: 100%;
  height: 100%;
  left: 33%;
  transform: translateY(-100%); /* added this */
}

.digitalAgency .agencyText.curr {
  visibility: visible;
  transform: translateY(0%); /* added this */
}

.digitalAgency .agencyText.next {
  visibility: hidden;
  transform: translateY(100%); /* added this */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="digitalAgency">
    <span class="textContainer">
    <span data-index="0" class="agencyText">Text for A</span>
    <span data-index="1" class="agencyText">Text for B</span>
    <span data-index="2" class="agencyText">Text for C</span>
    <span data-index="3" class="agencyText">Text for D</span>
    </span>
  </div>
</div>