224 lines
14 KiB
Plaintext
224 lines
14 KiB
Plaintext
- var animate = true;
|
|
- var page_animate = true;
|
|
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| Animate
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Animation
|
|
li.breadcrumb-item.active Animate
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-body
|
|
.row
|
|
.col-xl-6.col-md-8.offset-xl-3.offset-md-2
|
|
#animation-box
|
|
.card
|
|
.animate-widget
|
|
div
|
|
img.img-fluid(src='assets/images/banner/3.jpg', alt='')
|
|
.text-center.p-25
|
|
p.text-muted.mb-0
|
|
| Denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings
|
|
form.theme-form.text-center
|
|
.form-group
|
|
select.form-control.input.input--dropdown.js-animations
|
|
optgroup(label='Attention Seekers')
|
|
option(value='bounce') bounce
|
|
option(value='flash') flash
|
|
option(value='pulse') pulse
|
|
option(value='rubberBand') rubberBand
|
|
option(value='shake') shake
|
|
option(value='swing') swing
|
|
option(value='tada') tada
|
|
option(value='wobble') wobble
|
|
option(value='jello') jello
|
|
optgroup(label='Bouncing Entrances')
|
|
option(value='bounceIn') bounceIn
|
|
option(value='bounceInDown') bounceInDown
|
|
option(value='bounceInLeft') bounceInLeft
|
|
option(value='bounceInRight') bounceInRight
|
|
option(value='bounceInUp') bounceInUp
|
|
optgroup(label='Bouncing Exits')
|
|
option(value='bounceOut') bounceOut
|
|
option(value='bounceOutDown') bounceOutDown
|
|
option(value='bounceOutLeft') bounceOutLeft
|
|
option(value='bounceOutRight') bounceOutRight
|
|
option(value='bounceOutUp') bounceOutUp
|
|
optgroup(label='Fading Entrances')
|
|
option(value='fadeIn') fadeIn
|
|
option(value='fadeInDown') fadeInDown
|
|
option(value='fadeInDownBig') fadeInDownBig
|
|
option(value='fadeInLeft') fadeInLeft
|
|
option(value='fadeInLeftBig') fadeInLeftBig
|
|
option(value='fadeInRight') fadeInRight
|
|
option(value='fadeInRightBig') fadeInRightBig
|
|
option(value='fadeInUp') fadeInUp
|
|
option(value='fadeInUpBig') fadeInUpBig
|
|
optgroup(label='Fading Exits')
|
|
option(value='fadeOut') fadeOut
|
|
option(value='fadeOutDown') fadeOutDown
|
|
option(value='fadeOutDownBig') fadeOutDownBig
|
|
option(value='fadeOutLeft') fadeOutLeft
|
|
option(value='fadeOutLeftBig') fadeOutLeftBig
|
|
option(value='fadeOutRight') fadeOutRight
|
|
option(value='fadeOutRightBig') fadeOutRightBig
|
|
option(value='fadeOutUp') fadeOutUp
|
|
option(value='fadeOutUpBig') fadeOutUpBig
|
|
optgroup(label='Flippers')
|
|
option(value='flip') flip
|
|
option(value='flipInX') flipInX
|
|
option(value='flipInY') flipInY
|
|
option(value='flipOutX') flipOutX
|
|
option(value='flipOutY') flipOutY
|
|
optgroup(label='Lightspeed')
|
|
option(value='lightSpeedIn') lightSpeedIn
|
|
option(value='lightSpeedOut') lightSpeedOut
|
|
optgroup(label='Rotating Entrances')
|
|
option(value='rotateIn') rotateIn
|
|
option(value='rotateInDownLeft') rotateInDownLeft
|
|
option(value='rotateInDownRight') rotateInDownRight
|
|
option(value='rotateInUpLeft') rotateInUpLeft
|
|
option(value='rotateInUpRight') rotateInUpRight
|
|
optgroup(label='Rotating Exits')
|
|
option(value='rotateOut') rotateOut
|
|
option(value='rotateOutDownLeft') rotateOutDownLeft
|
|
option(value='rotateOutDownRight') rotateOutDownRight
|
|
option(value='rotateOutUpLeft') rotateOutUpLeft
|
|
option(value='rotateOutUpRight') rotateOutUpRight
|
|
optgroup(label='Sliding Entrances')
|
|
option(value='slideInUp') slideInUp
|
|
option(value='slideInDown') slideInDown
|
|
option(value='slideInLeft') slideInLeft
|
|
option(value='slideInRight') slideInRight
|
|
optgroup(label='Sliding Exits')
|
|
option(value='slideOutUp') slideOutUp
|
|
option(value='slideOutDown') slideOutDown
|
|
option(value='slideOutLeft') slideOutLeft
|
|
option(value='slideOutRight') slideOutRight
|
|
optgroup(label='Zoom Entrances')
|
|
option(value='zoomIn') zoomIn
|
|
option(value='zoomInDown') zoomInDown
|
|
option(value='zoomInLeft') zoomInLeft
|
|
option(value='zoomInRight') zoomInRight
|
|
option(value='zoomInUp') zoomInUp
|
|
optgroup(label='Zoom Exits')
|
|
option(value='zoomOut') zoomOut
|
|
option(value='zoomOutDown') zoomOutDown
|
|
option(value='zoomOutLeft') zoomOutLeft
|
|
option(value='zoomOutRight') zoomOutRight
|
|
option(value='zoomOutUp') zoomOutUp
|
|
optgroup(label='Specials')
|
|
option(value='hinge') hinge
|
|
option(value='jackInTheBox') jackInTheBox
|
|
option(value='rollIn') rollIn
|
|
option(value='rollOut') rollOut
|
|
button.js-triggeraNimation.btn.btn-primary Animate it
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 How to use it?
|
|
span
|
|
| All you have to do is to add animation name class attribute to html element, like :
|
|
code Fade
|
|
.card-body.options.animat-md-center
|
|
div flash
|
|
div pulse
|
|
div rubberBand
|
|
div shake
|
|
div swing
|
|
div tada
|
|
div wobble
|
|
div jello
|
|
div bounceIn
|
|
div bounceInDown
|
|
div bounceInLeft
|
|
div bounceInRight
|
|
div bounceInUp
|
|
div bounceOut
|
|
div bounceOutDown
|
|
div bounceOutLeft
|
|
div bounceOutRight
|
|
div bounceOutUp
|
|
div bounceOut
|
|
div bounceOutDown
|
|
div bounceOutLeft
|
|
div bounceOutRight
|
|
div bounceOutUp
|
|
div fadeOut
|
|
div fadeOutDown
|
|
div fadeOutDownBig
|
|
div fadeOutLeft
|
|
div fadeOutLeftBig
|
|
div fadeOutRight
|
|
div fadeOutRightBig
|
|
div fadeOutUp
|
|
div fadeOutUpBig
|
|
div flip
|
|
div flipInX
|
|
div flipInY
|
|
div flipOutX
|
|
div flipOutY
|
|
div lightSpeedIn
|
|
div lightSpeedOut
|
|
div rotateIn
|
|
div rotateInDownLeft
|
|
div rotateInDownRight
|
|
div rotateInUpLeft
|
|
div rotateInUpRight
|
|
div rotateOut
|
|
div rotateOutDownLeft
|
|
div rotateOutDownRight
|
|
div rotateOutUpLeft
|
|
div rotateOutUpRight
|
|
div slideInUp
|
|
div slideInDown
|
|
div slideInLeft
|
|
div slideInRight
|
|
div slideOutUp
|
|
div slideOutDown
|
|
div slideOutLeft
|
|
div slideOutRight
|
|
div zoomIn
|
|
div zoomInDown
|
|
div zoomInLeft
|
|
div zoomInRight
|
|
div zoomInUp
|
|
div zoomOut
|
|
div zoomOutDown
|
|
div zoomOutLeft
|
|
div zoomOutRight
|
|
div zoomOutUp
|
|
div hinge
|
|
div jackInTheBox
|
|
div rollIn
|
|
div rollOut
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|