392 lines
26 KiB
Plaintext
392 lines
26 KiB
Plaintext
- 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
|