javascript - 创建一致的简单横幅文本动画

大家好，我是javascript新手，我尝试创建横幅广告轮播动画，即IE，我有3条横幅广告，每次，幻灯片中都会出现带有动画的文字，我所面临的问题是我3张幻灯片上的动画一直无法使用，直到然后3张幻灯片滚动，当再次插入1张幻灯片时，第1张幻灯片上的文字不会动画，而且从此开始不会出现动画。

我从这个网站的横幅动画中得到启发：

banner text animation inspiration。

现在我尝试的是以下CSS动画：

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  100% {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}



@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

参见fiddle，您会更好地理解。

我真的很着迷横幅广告上的文字动画，我是Jquery和JS的新手，每当有新幻灯片插入时，我该怎么做才能使动画出现在幻灯片上。我创建了CSS-3我自己制作了动画，但是被困在这里。

谢谢。

亚历山大

最佳答案

如果您有3种以轮播方式显示的项目，则可以尝试此操作。
制作一个包含其他3个div的“主” div。
每个div都包含图像背景和文本，并使用javascript动画来显示文本。
然后像这样滑动3个div：

//function that slide the divs
$(document).ready(function() {
 var counter = 1;
 $("#d1").show();
 function change(){
      //Change the 3 divs inside a master div
      if(counter == 0){
         $("#d3").hide();
         $("#d1").show();
         counter++;
     }else if(counter == 1){
         $("#d1").hide();
         $("#d2").show();
         $("#d3").hide();
         counter++;
     }else if(counter == 2){
         $("#d1").hide();
         $("#d2").hide();
         $("#d3").show();
         counter++;
     }else{
         counter = 1;
         $("#d3").hide();
         $("#d1").show();
     }

 }
//every 6 seconds
setInterval(change, 6000);
});

使用CSS将d2和d3设置为不可见，因此您可以使用此javascript代码显示和隐藏它们。

您在找吗？

关于javascript - 创建一致的简单横幅文本动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29319886/