旋转木马猫头鹰2：麻烦动画字幕

时间：2016-03-13 19:34:24

标签： javascript jquery animation owl-carousel

我无法在猫头鹰旋转木马2中制作我的字幕动画。这是我到目前为止所做的：

$(document).ready(function() {
 
  $("#slider").owlCarousel({
    margin:0,
    autoplay : true,
    lazyLoad : true,
    items : 1,
    autoHeight : true,
    animateOut: 'fadeOut',
    dotsContainer: '#customDots',
  });

  $(".owl-item.active h2").addClass('animated');
  $(".owl-item.active h3").addClass('animated');

  $(".next").click(function(){
    $("#slider").trigger('owl.next');
  });
  $(".prev").click(function(){
    $("#slider").trigger('owl.prev');
  });
  $('.owl-dot').click(function () {
    $("#slider").trigger('to.owl.carousel', [$(this).attr('goto'), 500]);
  });

  $("#slider").on('change.owl.carousel', function(event) {
  	$(".owl-item h2").removeClass('animated');
  	$(".owl-item h3").removeClass('animated');
	});

	$("#slider").on('translate.owl.carousel', function(event) {
  	$(".owl-item.active h2").addClass('animated');
  	$(".owl-item.active h3").addClass('animated');
	});

  $('#customDots').css('top', $('#slider').height()-200+"px");
 
});
/*Top Section Design: Carousel*/
#slider{
	z-index:-5;
}
.owl-item {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}
#slider .owl-item img{
  display: block;
  width: 100%;
  height: auto;
}
#slider .owl-item:before{
	content:"";
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.35);
}
#customDots{
	width: 100%;
	position: absolute;
	top: 50vh;
	display: inline-block;
	text-align: center;
	color: gray;
}
#customDots .owl-dot.active{
	color: white!important;
}
.customNavigation{
	position: relative;
	top: 0;
	width: 100%;
	height: 100vh;
	color: white;
	z-index: -1;
}
.slide-caption {
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  margin-top: -120px;
  z-index: 0;
}
.slide-caption h2{
  color: #fff;
  font-size: 60px;
  font-weight: 800;
  line-height: 60px;
  text-transform: uppercase;
}
.slide-caption h2 span{
	color: black;
}
.slide-caption h3{
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider" class="owl-carousel">
		  <div>
		  	<img src="assets/landing-carousel/11.jpg">
				<div class="slide-caption">
					<h2 class="bounceInLeft">Something <span>important</span> here</h2>
					<h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
				</div>
		  </div>
		  <div>
		  	<img src="assets/landing-carousel/06.jpg">
		  	<div class="slide-caption">
					<h2 class="bounceInRight">Doesn't this <span>design</span> look nice?</h2>
					<h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
				</div>
			</div>
		  <div>
		  	<img src="assets/landing-carousel/05.jpg">
		  	<div class="slide-caption">
					<h2 class="bounceInRight">An <span>extraordinary</span> experience</h2>
					<h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
				</div>
		  </div>
		</div>

我正在努力使得当新幻灯片出现时，它会将动画类添加到当前幻灯片，以便显示动画。并将其从其他所有内容中移除，以便当它返回到流行的幻灯片时，它可以再次制作动画。

第一次加载时，它似乎适用于着陆滑梯。然后它会在下次停止工作时返回它。

让我知道我做错了什么。

1 个答案:

答案 0 :(得分：0)

$(document).ready(function() {
 
  $("#slider").owlCarousel({
    margin:0,
    autoplay : true,
    lazyLoad : true,
    items : 1,
    autoHeight : true,
    animateOut: 'fadeOut',
    dotsContainer: '#customDots',
  });

  /*$(".owl-item.active h2").addClass('bounceInRight');
  $(".owl-item.active h3").addClass('bounceInRight');*/

  $(".next").click(function(){
    $("#slider").trigger('owl.next');
  });
  $(".prev").click(function(){
    $("#slider").trigger('owl.prev');
  });
  $('.owl-dot').click(function () {
    $("#slider").trigger('to.owl.carousel', [$(this).attr('goto'), 500]);
  });

  /*$("#slider").on('change.owl.carousel', function(event) {
  	$(".owl-item h2").removeClass('bounceInRight');
  	$(".owl-item h3").removeClass('bounceInRight');
	});

	$("#slider").on('translate.owl.carousel', function(event) {
  	$(".owl-item.active h2").addClass('bounceInRight');
  	$(".owl-item.active h3").addClass('bounceInRight');
	});*/

  $('#customDots').css('top', $('#slider').height()-200+"px");
 
});
/*Top Section Design: Carousel*/
#slider{
	z-index:-5;
}
.owl-item {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}
#slider .owl-item img{
  display: block;
  width: 100%;
  height: auto;
}
#slider .owl-item:before{
	content:"";
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.35);
}
#customDots{
	width: 100%;
	position: absolute;
	top: 50vh;
	display: inline-block;
	text-align: center;
	color: gray;
}
#customDots .owl-dot.active{
	color: white!important;
}
.customNavigation{
	position: relative;
	top: 0;
	width: 100%;
	height: 100vh;
	color: white;
	z-index: -1;
}
.slide-caption {
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  margin-top: -120px;
  z-index: 0;
}
.slide-caption h2{
  color: #fff;
  font-size: 60px;
  font-weight: 800;
  line-height: 60px;
  text-transform: uppercase;
}
.slide-caption h2 span{
	color: black;
}
.slide-caption h3{
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 30px;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.owl-item.active .slide-caption h2{
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.owl-item.active .slide-caption h3{
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

  to {
    -webkit-transform: none;
    transform: none;
  }
}

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

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

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

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

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

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

  to {
    -webkit-transform: none;
    transform: none;
  }
}
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<div id="slider" class="owl-carousel">
		  <div>
		  	<img src="assets/landing-carousel/11.jpg">
				<div class="slide-caption">
					<h2 class="animated">Something <span>important</span> here</h2>
					<h3 class="animated">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
				</div>
		  </div>
		  <div>
		  	<img src="assets/landing-carousel/06.jpg">
		  	<div class="slide-caption">
					<h2 class="animated">Doesn't this <span>design</span> look nice?</h2>
					<h3 class="animated">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
				</div>
			</div>
		  <div>
		  	<img src="assets/landing-carousel/05.jpg">
		  	<div class="slide-caption">
					<h2 class="animated">An <span>extraordinary</span> experience</h2>
					<h3 class="animated">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
				</div>
		  </div>
		</div>

基于owl carousel Active类应用动画css。

相关问题
最新问题