311 lines
27 KiB
Plaintext
311 lines
27 KiB
Plaintext
- var theme_customizer = true;
|
||
- var tooltip = true;
|
||
- var photo_swipe = true;
|
||
- var isotope = true;
|
||
- var wow = true;
|
||
- var page_wow = true;
|
||
- var animate = 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
|
||
| Wow Animation
|
||
ol.breadcrumb
|
||
li.breadcrumb-item
|
||
a(href='index.html')
|
||
| Home
|
||
li.breadcrumb-item Animation
|
||
li.breadcrumb-item.active Wow Animation
|
||
.col-sm-6
|
||
include ../../components/bookmark
|
||
// Container-fluid starts
|
||
.container-fluid
|
||
.row
|
||
.col-sm-12
|
||
.card
|
||
.card-header.pb-0
|
||
h5 WOW Example animation
|
||
.card-body
|
||
#aniimated-thumbnials.row.gallery.grid.my-gallery(itemscope='')
|
||
figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
|
||
a(href='assets/images/big-masonry/1.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/1.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 1
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInDown.center(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
|
||
a(href='assets/images/big-masonry/2.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/2.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 2
|
||
figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
|
||
a(href='assets/images/big-masonry/3.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/3.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 3
|
||
figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 4
|
||
figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='')
|
||
a(href='assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 5
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 6
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInLeft(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 7
|
||
figure.grid-item.col-md-3.col-6.wow.flipInX.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/8.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/8.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 8
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 9
|
||
figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 10
|
||
figure.grid-item.col-md-3.col-6.wow.shake(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='')
|
||
a(href='assets/images/big-masonry/11.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/11.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 11
|
||
figure.grid-item.col-md-3.col-6.wow.swing.center(itemprop='associatedMedia', data-wow-iteration='2', itemscope='')
|
||
a(href='assets/images/big-masonry/12.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/12.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 12
|
||
figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/14.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/14.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 13
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInUp.center(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
|
||
a(href='assets/images/big-masonry/15.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/15.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 14
|
||
figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', data-wow-delay='0.5s', data-wow-duration='0.15s', itemscope='')
|
||
a(href='assets/images/big-masonry/13.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/13.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 15
|
||
figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 16
|
||
figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.25s', itemscope='')
|
||
a(href='assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 17
|
||
figure.grid-item.col-md-3.col-6.wow.flip(itemprop='associatedMedia', data-wow-iteration='2', data-wow-duration='0.15s', itemscope='')
|
||
a(href='assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 18
|
||
figure.grid-item.col-md-3.col-6.wow.lightSpeedIn.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 19
|
||
figure.grid-item.col-md-3.col-6.wow.bounce(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='')
|
||
a(href='assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 20
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInUp.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/8.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/8.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 21
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 22
|
||
figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 23
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 24
|
||
figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
|
||
a(href='assets/images/big-masonry/11.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/11.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 25
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInDown.center(itemprop='associatedMedia', data-wow-delay='1s', itemscope='')
|
||
a(href='assets/images/big-masonry/12.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/12.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 26
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', data-wow-delay='1.5s', itemscope='')
|
||
a(href='assets/images/big-masonry/14.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/14.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 27
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/15.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/15.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 28
|
||
figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
|
||
a(href='assets/images/big-masonry/13.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/13.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 29
|
||
figure.grid-item.col-md-3.col-6.wow.bounceInLeft.center(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 30
|
||
figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 31
|
||
figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') Image caption 32
|
||
figure.grid-item.col-md-3.col-6.wow.slideInRight(itemprop='associatedMedia', itemscope='')
|
||
a(href='assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950')
|
||
img.img-thumbnail(src='assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description')
|
||
figcaption(itemprop='caption description') 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
|
||
// element will get class pswp__preloader--active when preloader is running
|
||
.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.wow-title
|
||
h5
|
||
span.badge.badge-primary.badge-pill.me-2 1
|
||
| Setup wow.js
|
||
span (You can link to another CSS animation library by changing wow.js settings)
|
||
.card-body
|
||
div
|
||
.line
|
||
code
|
||
span
|
||
| <link rel="stylesheet" href="css/animate.css" >
|
||
.card
|
||
.card-header.pb-0.wow-title
|
||
h5
|
||
span.badge.badge-primary.badge-pill.me-2 2
|
||
| Link and activate wow.js
|
||
.card-body
|
||
div
|
||
.line
|
||
| < script src="js/wow.min.js" > < /script > <br />< script > <br /><code> WOW.init();</code><br />< /script >
|
||
.card
|
||
.card-header.pb-0.wow-title
|
||
h5
|
||
span.badge.badge-primary.badge-pill.me-2 3
|
||
| Make an element revealable
|
||
span (You can change this CSS class in the WOW settings to avoid name conflicts.)
|
||
.card-body
|
||
h6.text-muted
|
||
| Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.
|
||
div
|
||
.line
|
||
| < div class="wow" > <br /><code>Content to Reveal Here</code><br />< /div >
|
||
.card
|
||
.card-header.pb-0.wow-title
|
||
h5
|
||
span.badge.badge-primary.badge-pill.me-2 4
|
||
| Choose the animation style
|
||
span
|
||
| Pick an animation style in Animate.css , then add the CSS class to the HTML element
|
||
.card-body
|
||
div
|
||
.line
|
||
| < div class="wow bounceInUp" > <br /><code>Content to Reveal Here</code><br />< /div >
|
||
.card
|
||
.card-header.pb-0.wow-title
|
||
h5
|
||
span.badge.badge-success.badge-pill.me-2 Extra
|
||
| Advance Options
|
||
.card-body
|
||
div
|
||
.line
|
||
p
|
||
strong data-wow-duration:
|
||
| Change the animation duration
|
||
br
|
||
strong data-wow-delay:
|
||
| Delay before the animation starts
|
||
br
|
||
strong data-wow-offset:
|
||
| Distance to start the animation (related to the browser bottom)
|
||
br
|
||
strong data-wow-iteration:
|
||
| Number of times the animation is repeated
|
||
br
|
||
pre.mb-0
|
||
| <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"><br /> </section><br /> <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"><br /> </section>
|
||
|
||
.card
|
||
.card-header.pb-0.wow-title
|
||
h5
|
||
span.badge.badge-danger.badge-pill.me-2 Settings
|
||
| Customize Settings
|
||
.card-body
|
||
div
|
||
.line
|
||
p
|
||
strong boxClass:
|
||
| Class name that reveals the hidden box when user scrolls.
|
||
p
|
||
strong animateClass:
|
||
| Class name that triggers the CSS animations (’animated’ by default for the animate.css library)
|
||
p
|
||
strong offset:
|
||
| Define the distance between the bottom of browser viewport and the top of hidden box.
|
||
br
|
||
| When the user scrolls and reach this distance the hidden box is revealed.
|
||
p
|
||
strong mobile:
|
||
| Turn on/off wow.js on mobile devices.
|
||
p
|
||
strong live:
|
||
| consatantly check for new WOW elements on the page.
|
||
pre.mb-0
|
||
| wow = new WOW(<br /> {<br /> boxClass: 'wow', // default<br /> animateClass: 'animated', // default<br /> offset: 0, // default<br /> mobile: true, // default<br /> live: true // default<br /> }<br /> )<br /> wow.init();
|
||
// Page Body Ends
|
||
// Container-fluid Ends
|
||
include ../../components/footer
|
||
include ../../components/footer-files
|