Swiper.js with Wow.js Animation

Combining the Swiper.js with wow.js animated content

by Dmitry Stepanov

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.min.css">
<script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script>
  <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
</div>
 
 <div class="my1">
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <div class="animate">
            <div class="text"></div>
                </div>
</div>

 <div class="my1">
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <div class="animate">
            <div class="textwow"></div>
                </div>
</div>
 <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
            <div class="my2">
          <p>not animate</p>
       ...

CSS

html,body{position:relative;height:1000px;}body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0;}.swiper-container{width:100%;height:100%;}.swiper-slide{background-position:center;background-size:cover;}
.container { margin:40px; padding:40px ; display:block ; background-color: rgba(255,255,255, 0.7);width:300px;  }
.title { font-size:30px;}
.text { font-size:14px; }

JavaScript

$('.text').parent().parent().addClass('txt');
 $('.txt *').wrap('<div class="mytxt"></div>'); 

    $(function() {
    $('.mytxt')
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        var d = 1;
    		$('.mytxt').each(function(idx, elem){
        	if(scroll > ($(this).offset().top + $(this).height()) || (scroll + $(window).height()) <  $(this).offset().top) {
                   
            $(this).removeClass('wow fadeInUp').removeAttr('data-wow-delay').attr('style', 'visibility: hidden');
          }else{
        $(this).addClass('wow fadeInUp').attr('style', 'visibility: visible');
      			$(this).attr('data-wow-delay', d + 's');
             d += 0.5;
      				
  
         
            }
            	var wow = new WOW(
	  {
		boxClass:     'wow',      // animated element css class (default is wow)
		animateClass: 'animated', // animation css class (default is animated)
		offset:       0,          // distance to the element when triggering the animation (default is 0)
		mobile:       true,       // trigger animations on mobile devices (default is true)
		live:         true,       // act on asynchronously loaded content (default is true)
		callback:     function(box) {
		  // the callback is fired every time an animation is started
		  // the argument that is passed in is the DOM node being animated
		}
	  }
	);
	
	wow.init();
        });
    });
     $(window).trigger('scroll');
});