definicao de layout
This commit is contained in:
310
public/assets/pug/pages/template/wow.pug
Normal file
310
public/assets/pug/pages/template/wow.pug
Normal file
@@ -0,0 +1,310 @@
|
||||
- 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
|
||||
Reference in New Issue
Block a user