File: /home/crm/public_html/wwwroot/assets/pug/pages/theme/wow.pug
- 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