- var theme_customizer = true;
- var tooltip = true;
- var photo_swipe = true;
- var isotope = true;
- var aos = true;
- var page_aos = 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
| AOS Animation
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Animation
li.breadcrumb-item.active AOS Animation
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
.col-sm-12
.card
.card-header.pb-0
h5 AOS Example animation
.card-body
#aniimated-thumbnials.row.gallery.grid.my-gallery
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-down')
a(href='../assets/images/big-masonry/1.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/1.jpg', alt='Image description')
figcaption Image caption 1
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out-down')
a(href='../assets/images/big-masonry/2.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/2.jpg', alt='Image description')
figcaption Image caption 2
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/3.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/3.jpg', alt='Image description')
figcaption Image caption 3
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
figcaption Image caption 4
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
figcaption Image caption 5
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
figcaption Image caption 6
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
figcaption Image caption 7
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
a(href='../assets/images/big-masonry/8.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description')
figcaption Image caption 8
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
figcaption Image caption 9
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
figcaption Image caption 10
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/11.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description')
figcaption Image caption 11
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
a(href='../assets/images/big-masonry/12.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description')
figcaption Image caption 12
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/14.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description')
figcaption Image caption 13
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-left')
a(href='../assets/images/big-masonry/15.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description')
figcaption Image caption 14
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/13.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description')
figcaption Image caption 15
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out')
a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
figcaption Image caption 16
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-right')
a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
figcaption Image caption 17
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out')
a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
figcaption Image caption 18
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out-up')
a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
figcaption Image caption 19
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out-down')
a(href='../assets/images/big-masonry/8.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description')
figcaption Image caption 20
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
figcaption Image caption 21
figure.grid-item.col-sm-4.col-md-3(data-aos='slide-up')
a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
figcaption Image caption 22
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
figcaption Image caption 23
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
figcaption Image caption 24
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/11.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description')
figcaption Image caption 25
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
a(href='../assets/images/big-masonry/12.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description')
figcaption Image caption 26
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/14.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description')
figcaption Image caption 27
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-left')
a(href='../assets/images/big-masonry/15.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description')
figcaption Image caption 28
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
a(href='../assets/images/big-masonry/13.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description')
figcaption Image caption 29
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out')
a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
figcaption Image caption 30
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-right')
a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
figcaption Image caption 31
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out')
a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
figcaption Image caption 32
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out-up')
a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
figcaption Image caption 33
// Root element of PhotoSwipe. Must have class pswp.
.pswp(tabindex='-1', role='dialog', aria-hidden='true')
//
Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba().
.pswp__bg
// Slides wrapper with overflow:hidden.
.pswp__scroll-wrap
// Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.
// don't modify these 3 pswp__item elements, data is added later on.
.pswp__container
.pswp__item
.pswp__item
.pswp__item
// Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.
.pswp__ui.pswp__ui--hidden
.pswp__top-bar
// Controls are self-explanatory. Order can be changed.
.pswp__counter
button.pswp__button.pswp__button--close(title='Close (Esc)')
button.pswp__button.pswp__button--share(title='Share')
button.pswp__button.pswp__button--fs(title='Toggle fullscreen')
button.pswp__button.pswp__button--zoom(title='Zoom in/out')
// Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR
.pswp__preloader
.pswp__preloader__icn
.pswp__preloader__cut
.pswp__preloader__donut
.pswp__share-modal.pswp__share-modal--hidden.pswp__single-tap
.pswp__share-tooltip
button.pswp__button.pswp__button--arrow--left(title='Previous (arrow left)')
button.pswp__button.pswp__button--arrow--right(title='Next (arrow right)')
.pswp__caption
.pswp__caption__center
.card
.card-header.pb-0
h5 Init AOS
.card-body
div
span.comment
| // The Below Function is example of how to initlize reveal
.line
span
| <script>
span
br
code AOS.init();
br
span <
| /script
span >
.card
.card-header.pb-0
h5 How to use it?
span
| All you have to do is to add
code data-aos
| attribute to html element, like so:
.card-body
.txt-primary
span <
| div data-aos="animation_name"
span >
.card
.card-header.pb-0
h5 Advanced settings
span
| These settings can be set both on certain elements, or as default while initializing script (in options object without
code data- part).
.card-body.table-responsive
table.table.table-bordered.table-striped
thead
tr
th Attribute
th Description
th Example value
th Default value
tbody
tr
td
em
code data-aos-offset
td Change offset to trigger animations sooner or later (px)
td 200
td 120
tr
td
em
code data-aos-duration
td *Duration of animation (ms)
td 600
td 400
tr
td
em
code data-aos-easing
td Choose timing function to ease elements in different ways
td ease-in-sine
td ease
tr
td
em
code data-aos-delay
td Delay animation (ms)
td 300
td 0
tr
td
em
code data-aos-anchor
td
| Anchor element, whose offset will be counted to trigger animation instead of actual elements offset
td #selector
td null
tr
td
em
code data-aos-anchor-placement
td
| Anchor placement - which one position of element on the screen should trigger animation
td top-center
td top-bottom
tr
td
em
code data-aos-once
td
| Choose wheter animation should fire once, or every time you scroll up/down to element
td true
td false
.card
.card-header.pb-0
h5 Animation
span There are serveral predefined animations you can use already:
.card-body
ul.line
li
h5 Fade animations:
ul.ps-4.mb-4.list-circle
li fade
li fade-up
li fade-down
li fade-left
li fade-right
li fade-up-right
li fade-up-left
li fade-down-right
li fade-down-left
li
h5 Flip animations:
ul.ps-4.mb-4.list-circle
li flip-up
li flip-down
li flip-left
li flip-right
li
h5 Slide animations:
ul.ps-4.mb-4.list-circle
li slide-up
li slide-down
li slide-left
li slide-right
li
h5 Zoom animations:
ul.ps-4.list-circle
li zoom-in
li zoom-in-up
li zoom-in-down
li zoom-in-left
li zoom-in-right
li zoom-out
li zoom-out-up
li zoom-out-down
li zoom-out-left
li zoom-out-right
.card
.card-header.pb-0
h5 Anchor placement:
.card-body
ul.ps-4.list-circle.line
li top-bottom
li top-center
li top-top
li center-bottom
li center-center
li center-top
li bottom-bottom
li bottom-center
li bottom-top
.card
.card-header.pb-0
h5 Easing functions:
.card-body
ul.ps-4.list-circle.line
li linear
li ease
li ease-in
li ease-out
li ease-in-out
li ease-in-back
li ease-out-back
li ease-in-out-back
li ease-in-sine
li ease-out-sine
li ease-in-out-sine
li ease-in-quad
li ease-out-quad
li ease-in-out-quad
li ease-in-cubic
li ease-out-cubic
li ease-in-out-cubic
li ease-in-quart
li ease-out-quart
li ease-in-out-quart
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files