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

creating a consistent simple banner text animation

本文关键字：文本 动画 简单 创建      更新时间：2023-09-26

嘿，伙计们，我是javascript的新手，我尝试创建一个横幅旋转木马动画，我有3个横幅，每次幻灯片出现在文本中时都会出现一个动画，我面临的问题是，我的3张幻灯片上的动画只能工作，直到3张幻灯片滚动之后，当幻灯片1再次出现时，幻灯片1上的文本没有动画，从现在起动画就不会发生。

我的灵感来自这个网站的横幅动画：

横幅文字动画灵感。

现在我尝试了以下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;
}

看看小提琴，你会更好地理解的。

我真的很着迷于横幅上的文本动画，我是Jquery和JS的新手，每次有新的幻灯片出现时，我都要做些什么才能让动画出现在幻灯片上。我自己创建了CSS-3动画，但一直停留在这里。

谢谢。

亚历山大。

如果您有3个项目要在旋转木马方法中显示，您可以尝试一下。制作一个包含其他3个div的"master"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代码显示和隐藏它们。

你在找那个吗？

相关文章：