Animation

We used animate.css of Daniel Eden for animation. You can create your own animation easily by using animation.css.

01 - How to Use

Required Files And Folders

Include the stylesheet on your document's <head>
And also includes the Paradise Slider Main JS File on your document's <body>. This file is essential for animation.
You can find these files in CSS and JS Folder

<link href="paradise/css/animate.css" rel="stylesheet" media="all">
<script src="paradise/js/paradise_slider.js"></script>

HTML Structure

First of all you have to assign a data-animation="animated" attribute with animated value to the tag which you want to animate.
Secondly you have to assign the name of animation that you want to create as shown below fadeInUp
Animation name must be written in camelCase

  <h3 data-animation="animated fadeInUp">your text</h3>

CSS Structure

You can change the duration of your animations, add a delay or change the number of times that it plays:

  #yourElement {
    -vendor-animation-delay: 2s;
    -vendor-animation-duration: 3s;
    -vendor-animation-iteration-count: infinite;
  }

02 - Animation Types

bounce
- data-animation="animated bounce"
flash
- data-animation="animated flash"
pulse
- data-animation="animated pulse"
rubberBand
- data-animation="animated rubberBand"
shake
- data-animation="animated shake"
swing
- data-animation="animated swing"
tada
- data-animation="animated tada"
wobble
- data-animation="animated wobble"
jello
- data-animation="animated jello"
bounce In
- data-animation="animated bounceIn"
bounce In Down
- data-animation="animated bounceInDown"
bounce In Up
- data-animation="animated bounceInUp"
bounce In Right
- data-animation="animated bounceInRight"
bounce In Left
- data-animation="animated bounceInLeft"
fade In
- data-animation="animated fadeIn"
fade In Down
- data-animation="animated fadeInDown"
fade In Down Big
- data-animation="animated fadeInDownBig"
fade In Up
- data-animation="animated fadeInUp"
fade In Up Big
- data-animation="animated fadeInUpBig"
fade In right
- data-animation="animated fadeInRight"
fade In Right Big
- data-animation="animated fadeInRightBig"
fade In Left
- data-animation="animated fadeInLeft"
fade In Left Big
- data-animation="animated fadeInLeftBig"
flip In X
- data-animation="animated flipInX"
flip In Y
- data-animation="animated flipInY"
light Speed In
- data-animation="animated lightSpeedIn"
rotate In
- data-animation="animated rotateIn"
rotate In Down Left
- data-animation="animated rotateInDownLeft"
rotate In Down Right
- data-animation="animated rotateInDownRight"
rotate In Up Left
- data-animation="animated rotateInUpLeft"
rotate In Up Right
- data-animation="animated rotateInUpRight"
roll In
- data-animation="animated rollIn"
zoom In
- data-animation="animated zoomIn"
zoom In Down
- data-animation="animated zoomInDown"
zoom In Up
- data-animation="animated zoomInUp"
zoom In Left
- data-animation="animated zoomInLeft"
zoom In right
- data-animation="animated zoomInRight"
slide In Down
- data-animation="animated slideInDown"
slide In Up
- data-animation="animated slideInUp"
slide In Left
- data-animation="animated slideInLeft"
slide In Right
- data-animation="animated slideInRight"

03 - More

For further guideline just read the following complete tutorial about animation.css;

You can also read more about animation.css plugIn usage from this article;

SitePoint

04 - Support

Please do not hesitate if you have any queries about this product. We are always there for your help. You can contact us on this e-mail address szthemes1@gmail.com

Welcome to

paradise

Animation

01 - How to Use

Required Files And Folders

HTML Structure

CSS Structure

02 - Animation Types

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

jello

bounce In

bounce In Down

bounce In Up

bounce In Right

bounce In Left

fade In

fade In Down

fade In Down Big

fade In Up

fade In Up Big

fade In right

fade In Right Big

fade In Left

fade In Left Big

flip In X

flip In Y

light Speed In

rotate In

rotate In Down Left

rotate In Down Right

rotate In Up Left

rotate In Up Right

roll In

zoom In

zoom In Down

zoom In Up

zoom In Left

zoom In right

slide In Down

slide In Up

slide In Left

slide In Right

03 - More

04 - Support

Read More About

Use Full Links

Contac Us