Как заставить текст анимации выглядеть так, как будто он идет под другим слоем - PullRequest
Новая
       15

Как заставить текст анимации выглядеть так, как будто он идет под другим слоем

0 голосов
/ 29 апреля 2019

Для сопоставимого примера просмотрите этот сайт . Если вы посмотрите на левую сторону, вы увидите повернутый текст, который проходит по разным строкам текста. Это то, что я пытаюсь достичь. Текст в этом примере начинается с белой линии, а затем, когда он начинает двигаться вверх, он выглядит так, как будто он проходит под слоем, создавая впечатление, что он выходит из своего места.

Как я могу изменить свой код, чтобы справиться с этим?

Сейчас белая линия и текст не появляются в строке, и я не могу понять, как я могу заставить его выглядеть так, как будто текст перемещается под другим слоем. 

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>

enter image description here

1 Ответ

1 голос
/ 29 апреля 2019

Избавьтесь от 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>
...