package.docs.demos.animate.html Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of owl.carousel Show documentation
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
The newest version!


  

    
    
    
    
    
    
    
      Animate Demo | Owl Carousel | 2.3.4
    

    
    
    

    
    
    

    

    

    
    
    
    

    

    
    
    
  
  

    
    
      
        
          
            
              owl.carousel.js 
            
          
          
               
           
          
            
               Home  
              
                Demos 
              
               Docs  
              
                Download 
                 
              
            
          
        
      
    

    
    
      
        
          Animate
        
      
    

    
    
      
        
          
            
              1
            
            
              2
            
            
              3
            
            
              4
            
            
              5
            
            
              6
            
            
              7
            
            
              8
            
            
              9
            
            
              10
            
            
              11
            
            
              12
            
          
          Overview
          To get fade out effect just set:
          animateOut: 'fadeOut'
          
            fadeOut value is the only built-in CSS animate style. However there are tons of additional CSS animations that you can use in Owl. Simply download
              animate.css  library and you are ready to extend Owl with new fancy transitions.
          
          Important
          Animate functions work only with one item and only in browsers that support perspective property.
          How to use additional animation from animate.css library
          
             Download animate.css  
            Include animate.css into header.
            Set animateOut and animateIn options with the style names you picked.
          
          $('.custom1').owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450
});
          Example with slideOutDown and flipInX
          
            
              1
            
            
              2
            
            
              3
            
            
              4
            
            
              5
            
            
              6
            
            
              7
            
            
              8
            
            
              9
            
            
              10
            
            
              11
            
            
              12
            
          
          How does it work?
          Before animation starts three classes are added to each item:
          
            .animated - added on both In and Out item - ive included this class from Animate.css into Owl core CSS file.
            .owl-animated-out - only on Out item - use it to change z-index
            .owl-animated-in - only on In item - use it to change z-index
            .classNameOut - only on Out item - this is your custom animation class from options.
            .classNameIn - only on In item - this is your custom animation class from options.
          
          Part of owl.carousel.css:
          /* Feel free to change duration  */ 
.animated  {
  -webkit-animation-duration : 1000 ms  ;
  animation-duration : 1000 ms  ;
  -webkit-animation-fill-mode : both  ;
  animation-fill-mode : both  ;
}  
/* .owl-animated-out - only for current item */ 
/* This is very important class. Use z-index if you want move Out item above In item */ 
.owl-animated-out {
  z-index : 1 
   }
/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */ 
.owl-animated-in {
  z-index : 0 
   }
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */ 
.fadeOut  {
  -webkit-animation-name : fadeOut  ;
  animation-name : fadeOut  ;
}  
@-webkit-keyframes  fadeOut  {
  0% {
    opacity : 1   ;
  }  
  100% {
    opacity : 0   ;
  }  
}
@keyframes  fadeOut  {
  0% {
    opacity : 1   ;
  }  
  100% {
    opacity : 0   ;
  }  
}
          
          
        
      
    

    
    
      
        
          
            David Deutsch