Ответы пользователя по тегу Фронтенд
  • Как сдклать анимацию текста на слайдере owl-carousel?

    @sentimento
    После нескольких вечностей, сработал следующий вариант
    $(document).ready(function (){
      // Declare Carousel jquery object
      var owl = $('.owl-carousel');
    
      // Carousel initialization
        owl.owlCarousel({
        items:1,
        margin:10,
        autoHeight:true,
        autoplay: true,
        autoplayHoverPause:true,
        dots:true,
        loop:true,
        pagination:false,
        navigation:true
      });
    
    
      // add animate.css class(es) to the elements to be animated
      function setAnimation ( _elem, _InOut ) {
        // Store all animationend event name in a string.
        // cf animate.css documentation
        var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    
        _elem.each ( function () {
          var $elem = $(this);
          var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut );
    
          $elem.addClass($animationType).one(animationEndEvent, function () {
            $elem.removeClass($animationType); // remove animate.css Class at the end of the animations
          });
        });
      }
    
    // Fired before current slide change
      owl.on('change.owl.carousel', function(event) {
          var $currentItem = $('.owl-item', owl).eq(event.item.index);
          var $elemsToanim = $currentItem.find("[data-animation-out]");
          setAnimation ($elemsToanim, 'out');
      });
    
    // Fired after current slide has been changed
      owl.on('changed.owl.carousel', function(event) {
    
          var $currentItem = $('.owl-item', owl).eq(event.item.index);
          var $elemsToanim = $currentItem.find("[data-animation-in]");
          setAnimation ($elemsToanim, 'in');
      })
    
    });


    HTML слайдера:
    <div class="owl-carousel">
    	<div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/1-1.jpg" alt="" width="848" height="370" />
    		<div class="item12">
    			<div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
    				Двери серии Trend                            
    			</div>
    			<div class="excerpt" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" hidden-xs" style="top:-15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
    			<div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
            </div>
        </div>
        <div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/ded96eb521aaf1cea928cc95dc05d996.jpg" alt="" width="848" height="370" />
            <div class="item12">
    			<div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
    				Двери серии Trend                            
    			</div>
    			<div class="excerpt hidden-xs" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" top: -15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
    			<div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
    		</div>
    	</div>
    	<div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/ded96eb521aaf1cea928cc95dc05d996.jpg" alt="" width="848" height="370" />
    		<div class="item12">
    			<div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
    				Двери серии Trend                            
    			</div>
    			<div class="excerpt hidden-xs" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" top: -15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
    			<div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
    		</div>
    	</div>
    </div>


    CSS:

    .item12 {
        color: #fff;
        position: absolute;
        top: 24%;
        z-index: 250;
        padding-left: 8%;
    	
    }
    .item12 .excerpt, .item12 .small {
        font-size: 17px;
        line-height: 30px;
        margin-top: 10px;
       margin-bottom: 20px;
        font-family: 'Roboto';
        font-weight: 500;
        background: rgba(0, 0, 0, 0);
        color: #fff;
        text-transform: uppercase;
        text-shadow: 1px 2px 2px rgba(0,0,0,0.9);
    }
    .item12 .big-text {
        font-size: 35px;
        line-height: 50px;
        text-transform: uppercase;
       text-shadow: 1px 2px 2px rgba(0,0,0,0.9);
     
        color: #fff;
    }
    .animated  {
      -webkit-animation-duration : 3s  ;
      animation-duration : 3s  ;
    
      -webkit-animation-delay : 500ms  ;
      animation-delay : 500ms  ;
    }
    
    .animate-out {
      -webkit-animation-delay : 0ms  ;
      animation-delay : 0ms  ;
    }
    Ответ написан
    1 комментарий