Question

嘿伙计们我是javascriptand的新手我尝试创建横幅旋转木马动画，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动画，但我被困在这里。

谢谢。

亚历山大。

Answer 1

如果您有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代码显示和隐藏它们。

你在寻找吗？

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

1 个答案: